<template>
    <div style="height: 100%" v-loading="loading">
        
        <div class="grid-btn-box">
            <div
                class="tool-bar2-copy"
                :class="{ red: changeColor == 15 }"
                @click="selectComparePathology()"
                title="选取对比切片"
                >
                <i class="el-icon-folder"></i> 
            </div>
            <div class="cut-line" style="float: right"></div>
            <div class="tool-bar2-copy" style="font-size: 25px" :class="{ red: changeColor == 'grid' }" 
                title="宫格布局" id="gridLayOut">
                <i class="el-icon-s-grid" @click="changeLayout"></i>
                <GridLayoutButton
                    :isShow.sync="isShow"
                    @gridlayoutResult="selectedGrid"
                />
            </div>
            <div class="cut-line" style="float: right"></div>
            <!-- 显示重置之后的倍数 -->
            <div id="viewZoomNumber" class="tool-bar2">
                {{ viewZoomNumber }}
            </div>
        </div>
        
        <div class="openSeadragon" :id="getId(key)"
            v-for="(item, key) in getBioList()"
            :key="key"
            :style="cellItemStyle"
            @dblclick="jumpToCell(item)">
            <!-- :annotationsData="annotationsDataInit" 
                :AiAnnotationsData="aiAnnotationsData"
                :MHAnnotationsData="mhAnnotationsData"  -->
            <OpenSeadragonView 
                :key="newTimer" 
                v-show="ifOpenseadragon" 
                ref="openseadragon"
                :sourceUrl="getPath(item.newFilename)"
                :pixelsPerMeter="1992428.7706714484"
                @annotation-drawing-end="annotationDrawingEnd"
                @mh-annotation-drawing-end="mhAnnotationDrawingEnd"
                @uploadAnnotation="uploadAnnotation"
                @jumpToNumber="jumpToNumber"
                
                :info="info" 
                :bgColor="bgColor"
                :tiles="tiles" 
                :type="item.newFilename.indexOf('sdpc') > 0 ? 'IIIF' : 'DZI'"
                :imageInfo="imageInfo" 
                @openseadragon-open="openseadragonOpen"
                @ai-annotation-drawing-end="aiAnnotationDrawingEnd"
                @view-zoom="viewZoom"
                @annotation-select="annotationSelect">
            </OpenSeadragonView>
        </div>
        
        <!-- 教鞭 -->
        <canvas id="ruler-overlay" v-show="isAllowDrawLine"></canvas>
        <!-- 截图 -->
        <canvas id="drawRectCanvas"></canvas>
        <canvas id="shadeCanvas"></canvas>

        <div id="prescription" style="display: none; background: white; flex-wrap: wrap">
            <!--倍率框-->
            <div id="rate" style="text-align: left; width: 100%"></div>
            <!--时间框-->
            <div id="screenshotTime" style="text-align: left; width: 100%"></div>
            <!--可输入框-->
            <div id="SCinputBox" style="
                    text-align: center;
                    width: 100%;
                    word-break: break-all;
                    word-wrap: break-word;
                    background: white;
                    font-size: 18px;
                " contenteditable="true" placeholder="请输入描述内容"></div>
        </div>
        <div id="canvasToolbar">
            <div class="canvasButton" title="退出截图" id="cancel" @click="sCancel">
                <font-awesome-icon :icon="['fas', 'power-off']" size="lg" />
            </div>
            <div class="canvasButton" title="完成截图" id="success" @click="sSuccess">
                <font-awesome-icon :icon="['fas', 'check']" size="lg" />
            </div>
        </div>
        <el-dialog v-dialogDrag title="临床" :visible.sync="clinicalDialogVisible" width="75%">
            <DiagnosisDetailClinical :typeActiveTab="clinicalActiveTab"></DiagnosisDetailClinical>

        </el-dialog>
        <el-dialog v-dialogDrag title="MH" :visible.sync="mhDialogVisible" width="75%" @close="closeMHDialog">
            <el-table v-if="mhDialogVisible" :data="MHData" border :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{
                    'background-color': '#E6E9EF',
                    'color': '#777C7C',
                    'font-weight': '400',
                    'font-size': '15px',
                    'border-right': '1px solid #ffffff',
                    'text-align': 'center'
                }" size="mini" style="width: 100%;margin-top: 20px;min-height:750px">
                <el-table-column label="序号" prop="index" width="60" align="center">
                </el-table-column>
                <el-table-column label="缩略图">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="ImageServiceURL + scope.row.previewUrl"
                            :preview-src-list="[ImageServiceURL + scope.row.previewUrl]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="热力图">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="ImageServiceURL + scope.row.url"
                            :preview-src-list="[ImageServiceURL + scope.row.url]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="分数图">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="ImageServiceURL + scope.row.fractionUrl"
                            :preview-src-list="[ImageServiceURL + scope.row.fractionUrl]"></el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="fraction" label="分数">
                </el-table-column>
                <el-table-column prop="biopsyId" label="切片id">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column prop="biopsyName" label="切片名">
                </el-table-column>
                <el-table-column prop="createUser" label="创建用户">
                </el-table-column>
                <el-table-column label="分析状态"><template slot-scope="scope">{{
                    scope.row.status == 0 ? '待分析' : scope.row.status == 1 ? '分析中' : scope.row.status == 2 ? '分析完成' :
                        scope.row.status == 3 ? '分析失败' : ''
                }}</template>
                </el-table-column>
                <el-table-column prop="reasonForFailure" label="失败原因">
                </el-table-column>
                <el-table-column label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="resetOnePoint(scope.row)">回显</el-button>
                        <el-button size="mini" type="text" @click="deletePoint(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog
            title="选取对比切片"
            :visible.sync="pathologyListDialogShow"
            append-to-body
            width="85%">
            <el-tabs v-model="activePathologyListCardName" type="card"> 
                <el-tab-pane label="病例切片" name="myPathology">
                    <base-table
                        ref="pathologyListDialog"
                        :data="pathologyListDialog.data"
                        :header="pathologyListDialog.header"
                        :pageInfo="pathologyListDialog.pageInfo"
                        @handleClick="pathologyListDialogButtonClick"
                        @pageJumpTo="pathologyListDialogPageJumpTo"
                        @sizeChange="pathologyListDialogSizeChange"
                        selected="true"
                        @selectionChange="selectionChange"
                    >
                    </base-table>
                </el-tab-pane>
                <el-tab-pane label="其他切片" name="otherPathology">
                    <OtherPathologyCompare></OtherPathologyCompare>
                </el-tab-pane>
            </el-tabs>
            
            
        </el-dialog>
    </div>
</template>

<script>
import qs from 'qs';
import _ from 'lodash';
import $ from 'jquery';
import jcanvasFactory from './Viewer/jcanvas';
import html2canvas from './Viewer/html2canvas';
import OpenSeadragon from './components/OpenSeadragon/OpenSeadragon';
import DiagnosisList from './Viewer/ViewerDiagnosisList';
import AIFloating from './Viewer/AIFloating';
import AiTct from './Viewer/AiTct.vue';
import SliceInfo from './Viewer/SliceInfo';
import HotKey from './Viewer/Hotkey';
import DiagnosisDetail from './components/DiagnosisDetail';
import OtherPathologyCompare from './components/otherPathologyCompare';
import DiagnosisDetailClinical from './components/DiagnosisDetailClinical';
import Analysis from './Viewer/Analysis';
import BaseTable from '@templates/components/BaseTable';
import { itemsPerPage } from '@/client/libs/util';
import Client from '../../server/client';
import Diagnosis from './Diagnosis/Diagnosis.vue';
import DiagnosisResultStatisticsComp from '@templates/components/diagnosisResultStatisticsComp.vue';
import ViewerDiagnosticBasis from '@/client/templates/Viewer/ViewerDiagnosticBasis';
import { vxRule } from '../libs/validator';
import VueDragResize from 'vue-drag-resize';

export default {
    components: {
        OpenSeadragon,
        DiagnosisList,
        DiagnosisDetail,
        DiagnosisDetailClinical,
        AIFloating,
        AiTct,
        SliceInfo,
        HotKey,
        Analysis,
        BaseTable,
        Diagnosis,
        DiagnosisResultStatisticsComp,
        ViewerDiagnosticBasis,
        VueDragResize,
        OtherPathologyCompare,
    },
    data() {
        return {
            //九宫格
            isShow: false,
            cellSize: 1,
            // 修改
            originCellCol: 1, // 记录放大之前的格式
            originCellRow: 1,
            imgZoomStatus: undefined,
            originCellKey: undefined, // 记录放大之前的图片key值
            showCols: 1,
            showRows: 1,
            currentPath:undefined,
            cellItemStyle: {
                width: "0px",
                height: "0px",
            },
            gridLayoutTool: [
                {
                    icon: "iconfont icon-gridlayout",
                    text: "布局",
                    location: "first",
                    func: "changeLayout",
                },
            ],


            clinicalDialogVisible: false,
            mhDialogVisible: false,
            MHData: [],
            isCollected: null,
            newTimer: '',
            openseadragonIsShow: false,
            tiles: [
                {
                    scaleFactors: [1, 4, 16],
                    width: 440,
                    height: 540,
                },
            ],
            sourceType: this.$route.query.fileName.indexOf("sdpc") >= 0 ? "IIIF" : "DZI",
            imageInfo: {
                width: 21120,
                height: 77760,
                maxLevel: 0,
                curScale: 0,
            },
            currentDeg: 0,
            userName: this.$store.state.user.name,
            currentSuspicious: {}, //当前可疑点
            switchValue: {
                scale: true,
                zoom: true,
                disc: true,
                markLabel: true,
                AIAnalysis: false,
                patientId: true,
                navigator: true,
                net: false,
                isFlicker: false, //控制标注闪烁
                groupMark: false, //成组标注开关
            },
            isFullScreen: true,
            isSlicePanelShow: false,
            isPencilPanelShow: false,
            isColorPanelShow: false,
            isSwitchPanelShow: false,
            coordinateColor: {
                red: 50,
                blue: 50,
                gama: 100,
                yellow: 50,
                contrast: 100,
                light: 50,
            },
            //传给组件diagnosisdetail组件的值，快捷键调出子组件对应的tab-item
            activeTabItem: 'tabBase',
            clinicalActiveTab: 'tabGastroscopeReport',
            // 左侧切片图片样式
            styleObject: {
                cursor: 'pointer',
                position: 'relative',
                isDisplay: 'inline',
                width: '200px',
            },
            styleObjectClass: {
                left: '-100px',
            },
            yinYangIcons: [],
            biopsyList: [],

            biopsyId: this.$route.query.biopsyId,
            newBiopsyid: this.$route.query.biopsyId, //根据扫描员点击上一张下一张变的切片id
            biopsyOriginFilename: this.$route.query.originFilename,
            biopsyName: this.$route.query.fileName,
            labelUrl: '',
            annotationsDataInit: [],
            ifhideCallout: false,
            active: false,
            // 标注提示
            mark: {
                warning: '',
                remark: '',
            },
            markRules: {
                warning: [
                    vxRule(true, null, 'blur', '请填写标注笔记'),
                    vxRule(
                        true,
                        'length',
                        'blur',
                        '标注笔记填写请不要超过255个字符',
                        null,
                        255
                    ),
                ],
                remark: [
                    vxRule(true, null, 'blur', '请填写备注内容'),
                    vxRule(
                        true,
                        'length',
                        'blur',
                        '备注内容填写请不要超过255个字符',
                        null,
                        255
                    ),
                ],
            },
            newannotations: [],
            newPic: '',
            // 组件AI数据
            F3info: null,
            F3AnalysisInfo: '',
            AIdata: null,
            SliceInfoData: null,
            drawer: false,
            Ifanalysis: false,
            experimentDialog: false,

            AIEvaluationDialogListTableData: [],
            operation: [
                {
                    label: '查看详情',
                    color: 'red',
                    functionKey: 'watchDetail',
                },
            ],
            pageInfo: {
                page: 1,
                size: 15,
                total: 0,
            },
            AIEvaluationDialogListTableHeader: [
                {
                    label: '切片id',
                    prop: 'biopsyId',
                    width: '180',
                },
                {
                    label: '切片名称',
                    prop: 'sliceName',
                    width: '180',
                },
                {
                    label: '阴阳性（AI）',
                    prop: 'masculineAi',
                    width: '180',
                },
                {
                    label: '阴阳性（专家）',
                    prop: 'expertAdvice',
                    width: '180',
                },
                {
                    label: '创建医生',
                    prop: 'createUser',
                    width: '180',
                },
                {
                    label: '创建时间',
                    prop: 'createTime',
                    width: '180',
                },
                {
                    label: '更新医生',
                    prop: 'updateUser',
                    width: '180',
                },
                {
                    label: '更新时间',
                    prop: 'updateTime',
                    width: '180',
                },
                {
                    label: '慢性炎症（AI）',
                    prop: 'chronicInflammationAi',
                    width: '180',
                },
                {
                    label: '慢性炎症（专家）',
                    prop: 'chronicInflammationExpertAdvice',
                    width: '180',
                },
                {
                    label: '肠化（AI）',
                    prop: 'imAi',
                    width: '180',
                },
                {
                    label: '肠化（专家）',
                    prop: 'imExpertAdvice',
                    width: '180',
                },
                {
                    label: '萎缩（AI）',
                    prop: 'atrophyAi',
                    width: '180',
                },
                {
                    label: '萎缩（专家）',
                    prop: 'atrophyExpertAdvice',
                    width: '180',
                },
                {
                    label: '活动性（AI）',
                    prop: 'activityAi',
                    width: '180',
                },
                {
                    label: '活动性（专家）',
                    prop: 'activityExpertAdvice',
                    width: '180',
                },
                {
                    label: 'HP（AI）',
                    prop: 'hpai',
                    width: '180',
                },
                {
                    label: 'HP（专家）',
                    prop: 'hpexpertAdvice',
                    width: '180',
                },
                {
                    label: '异性增生（AI）',
                    prop: 'alienGrowthAi',
                    width: '180',
                },
                {
                    label: '异性增生（专家）',
                    prop: 'alienGrowthExpertAdvice',
                    width: '180',
                },
                {
                    label: '备注',
                    prop: 'remark',
                    width: '180',
                },
            ],
            EvaluationFormFilter: {
                pathologyId: this.$route.query.pathologyId,
                biopsyId: this.$route.query.biopsyId,
            },
            AIEvaluationForm: {
                pathologyId: '',
                biopsyId: '',
                sliceName: '',
                masculineAi: '',
                expertAdvice: '',
                remark: '',
                chronicInflammationAi: '',
                chronicInflammationExpertAdvice: '',
                imAi: '',
                imExpertAdvice: '',
                atrophyAi: '',
                atrophyExpertAdvice: '',
                activityAi: '',
                activityExpertAdvice: '',
                hpai: '',
                hpexpertAdvice: '',
                alienGrowthAi: '',
                alienGrowthExpertAdvice: '',
                evaluateExpert: '',
                evaluateTime: '',
                radio: '',
                other: '',
            },
            freezeTypeList: [], //冰冻类型字典
            AIEvaluationFormList: {
                expertAdviceList: [],
                yinyangOpinion: [
                    {
                        name: '阴性',
                        id: 0,
                    },
                    {
                        name: '阳性',
                        id: 1,
                    },
                ],
            },

            qualityEvaluationForm: {
                biopsyQuality: '',
                scanDefinition: '',
                scanNumber: '', //切片号
                serialNumber: '', //切片序号
                currentSerialNumber: '', //当前第几张/共多少张
                biopsyId: this.$route.query.biopsyId,
            },
            qualityEvaluationShow: false,
            dictionaryMap: [
                {
                    code: 'sliceQuality',
                    array: 'biopsyQualityList',
                },
                {
                    code: 'scanningQuality',
                    array: 'scanQualityList',
                },
                {
                    code: 'countOfTransferPostiveToNegative',
                    array: 'countOfTransferPostiveToNegativeList',
                },
            ],
            biopsyQualityList: [],
            scanQualityList: [],
            countOfTransferPostiveToNegativeList: [],

            isAllowDrawLine: false,
            btnSureShow: true,
            changeColor: -1,
            hotkey: false,
            visibleDict: {
                patienterList: false, //诊断列表
                patienterDetail: false, // 诊断详情
                AIEvaluationDialogList: false, //AI分析列表
                isShowSliceInfoStatus: false, // 切片信息
                AIEvaluationDialog: false, //AI分析准确性评价
                annotationsWarn: false, //画笔标注
            },
            pathologyServiceURL: process.env.pathologyServiceURL,
            AnnotationsServiceURL: process.env.pathologyServiceURL,
            ImageServiceURL: process.env.ImageServiceURL,
            info: '', //病人信息
            bgColor: '', //综合分析红点绿点
            aiAnnotationsData: [], //胃镜aipoints
            tctPartOfGroup: {
                arrayASCUS: [], //tct ASCUS aipoints
                arrayASCH: [], //tct ASCH aipoints
                arrayLSIL: [], //tct LSIL  aipoints
                arrayHSIL: [], //tct HSIL aipoints
            },

            annotationsData: [],
            pencilActive: false,
            polygonActive: false,
            rectangleActive: false,
            measureDistanceActive: false,
            measureAreaActive: false,
            flag: true,
            timer: null,
            timerOne: null,
            viewerAngle: 0,
            viewerAngleCopy: 90,
            viewZoomNumber: 1,
            annDialogVisible: false,

            diagnosisIdMock: 0,
            updateAnnInfo: {
                annotationId: '',
                width: '',
                height: '',
                saveUserName: '',
                createAt: '',
                area: '',
            },
            showleftPic: true,
            diagnosisId: null,
            currentLevelLabel: null,
            loading: false,
            prevPathologyId: null,
            nextPathologyId: null,
            ifOpenseadragon: true,
            pathologyId: this.$route.query.pathologyId,
            collectionAnnotationImages: null,
            annotationImages: [],
            initWidth: 0,
            initHeight: 0,
            initX: 0,
            initY: 0,
            isActive: 0,
            specimenType: null,
            diagnosticBasisData: {
                showStatus: false,
            },
            // dziUrl: this.pathologyServiceURL + this.$route.query.dzi,
            groupMark: { note: null, remark: null }, //成组标注存放的标注笔记与标注内容
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight - 50,

            mhAnnotationsData: [],
            mhAnnotationsDataDrawEnd: [],
            urlHaspDiagnosisType: this.$route.query.pDiagnosisType,

            pathologyListDialogShow:false,
            selectedPathologyList:[],
            pathologyListDialog:{
                data: [],
                header: [
                    {
                        label: '病理编号',
                        prop: 'pathologyId',
                        width: '107',
                    },
                    {
                        label: '分院名称',
                        prop: 'branchName',
                        width: '107',
                    },
                    {
                        label: '切片标签',
                        width: '140',
                    },
                    {
                        label: '缩略图',
                        width: '140',
                        isRender: true,
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src:
                                        this.ImageServiceURL +
                                        params.row.previewUrl,
                                },
                                style: {
                                    width: '140px',
                                    height: '65px',
                                },
                            });
                        },
                    },
                    {
                        label: '切片类别',
                        prop: 'sliceCategoryName',
                        width: '107',
                    },
                    {
                        label: 'AI分析结果',
                        width: '107',
                    },
                    {
                        label: '切片质量',
                        prop: 'biopsyQuality',
                        width: '107',
                    },
                    {
                        label: '清晰度',
                        prop: 'scanDefinition',
                        width: '107',
                    },
                    {
                        label: '切片大小',
                        prop: 'fileSizeStr',
                        width: '107',
                    },
                    {
                        label: '扫描批次',
                        prop: 'biopsyHistoryId',
                        width: '107',
                    },
                    {
                        label: '扫描倍率',
                        prop: 'level',
                        width: '107',
                    },
                    {
                        label: '上传时间',
                        prop: 'createTime',
                        width: '138',
                    },
                    {
                        label: '扫描机器号',
                        prop: 'scannerSerialNumber',
                        width: '150',
                    },
                    {
                        label: '切片所属医院',
                        prop: 'sliceHospitalName',
                        width: '120',
                    },
                ],
                pageInfo: {
                    page: 1,
                    size: itemsPerPage.get(),
                    total: 0,
                },

            },
            activePathologyListCardName:'myPathology'
        };
    },

    methods: { 
        
    getBioList() {
        let res = [];
        if (this.cellSize <= 1) {
            res.push(this.currentPath);
            // res.push({newFilename:this.$route.query.fileName});
        } else {
            res = this.biopsyList.slice(0, this.cellSize);
        }
        console.log(res,this.biopsyList)
        return res;
    },
    jumpToCell(val) {
      this.currentPath = val
      this.selectedGrid({
        col: 1,
        row: 1,
      });
      this.$refs.openseadragon[0].open(this.getPath(val.newFilename))
    },
    getPath(fileName) {
      if (fileName.indexOf("sdpc") >= 0) {
        return `${this.pathologyServiceURL}/images/${fileName}`;
      }
      return `${this.pathologyServiceURL}/images/${fileName}.dzi`;
    },
    getId(val) {
      return `open-sea-dragon${val}`;
    },
    // 九宫格
    selectedGrid(params) {
      console.log(params);
      this.originCellCol = this.showCols = params.col;
      this.originCellRow = this.showRows = params.row;
      this.cellSize = params.col * params.row;

      this.generateGrid(this.showRows, this.showCols);
    },
    generateGrid(rows, cols) {
      console.log(rows, cols);
      // 只要布局状态发生改变，所有的工具都恢复默认
      this.changeColor = -1;
      // 生成选择布局
      // 三个格子在一行，有3 * 2条border， 每条border宽1px, 所以总宽减去所有border的size，剩下位置三等分，就是每个item的宽了
      // 由于是矩形，高度也类似
      const freeBorderSize = cols * 2;
      this.cellItemStyle.width = `calc(${100 / cols}% - ${freeBorderSize /
        cols}px)`;
      this.cellItemStyle.height = `calc(${100 / rows}% - ${(freeBorderSize +
        50) /
        rows}px)`;

      // 重制dicom viewer
      this.$nextTick(() => {
        if (this.$refs.openseadragon) {
          // 格子布局渲染后顺序执行，防止找不到对应的ref
          const refLength = this.$refs.openseadragon.length;
          for (let i = 0; i < refLength; i++) {
            if (this.cellSize > 1) {
              this.$refs.openseadragon[i].normalToolSwitch(
                "rulerOrScale",
                true
              );
              this.$refs.openseadragon[i].normalToolSwitch(
                "gridShow",
                false
              );
              
               this.$refs.openseadragon[i].open(this.getPath(this.biopsyList[i].newFilename))
            }
            this.$refs.openseadragon[i].measuring.reDraw(1);
           
          }
        }
      });
    },
    addMouseWheelListener(element, callback) {
      // 接收字符串，DOM对象，JQuery对象等多种格式
      element = TypeModule.toHtmlElement(element);
      ["mousewheel", "DOMMouseScroll"].forEach((eventType) => {
        element.addEventListener(eventType, (event) => {
          event = event || window.event;
          const dy = event.wheelDelta || event.detail * -40;
          callback(dy);
        });
      }, true);
    },

    // 修改布局
    changeLayout() {
      if (this.changeColor === 'grid') {
        this.changeColor = -1;
        this.isShow = false;
      } else {
        this.changeColor = 'grid';
        this.isShow = true;
      }
    },


    selectComparePathology(){
        this.pathologyListDialogShow=true
        this.pathologyListDialog.data=this.biopsyList

    },
    pathologyListDialogButtonClick(functionKey, row) {
        this[functionKey](row);
    },
    pathologyListDialogPageJumpTo(val) {
        this.pathologyListDialog.pageInfo.page = val;
        console.log('page', val);
        
    },
    pathologyListDialogSizeChange(val) {
        this.pathologyListDialog.pageInfo.size = val;
        console.log('size', val);
        
    },
    selectionChange(data){
        this.selectedPathologyList=data
    },
        //获取强生图片宽高
        getImageInfo(filename) {
            this.$axios({
                method: 'GET',
                url: `${this.AnnotationsServiceURL}/images/info/${filename}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    const result = res.data.data;
                    this.imageInfo.height = result.imageHeight;
                    this.imageInfo.width = result.imageWidth;
                    this.imageInfo.maxLevel = result.maxLevel;
                    this.imageInfo.curScale = result.curScale;
                    this.tiles[0].height = result.tileHeight;
                    this.tiles[0].width = result.tileWidth;
                    this.newTimer = new Date().getTime();
                    this.openseadragonIsShow = true;
                }
            });
        },
        // 图片旋转
        imagePinwheel(e) {
            console.log(this.$refs)
            this.currentDeg += 90;
            this.$refs.IMAGE_SERVICE.style.transform = `rotate(${this.currentDeg}deg)`;
        },
        calcTotleScore(data, isShowViewerDiagnosticBasis) {
            this.bgColor = data;
            // this.diagnosticBasisData.showStatus = isShowViewerDiagnosticBasis;
        },
        //切片重扫      请求后此切片会从服务器文件夹里删除，但是记录仍在
        sliceRescan() {
            this.$confirm(
                '如果重扫切片，此切片将删除，此条诊断记录不会出现在任务列表内，等扫描员将此切片补扫成功后，此条诊断记录会自动出现在任务列表。需要通知扫描员重新扫描此切片吗？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    let mData = {
                        biopsyId: this.newBiopsyid,
                        sliceQualityStatus: 2,
                        scanDefinition: '需重扫',
                    };
                    this.$axios({
                        method: 'POST',
                        url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
                        data: mData,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('已通知扫描员重扫此切片');
                        } else {
                            this.$message.warning(res.data.message);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重扫',
                    });
                });
        },
        //根据切片id拿到切片信息
        getSliceInfoInfo(biopsyId) {
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/biopsy/sliceQualityEvaluateSingleBiopsyInformation/${biopsyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.SliceInfoData = res.data.data[0];
                    this.qualityEvaluationForm.serialNumber = '';
                } else {
                    this.$message.info(res.data.message);
                }
            });
        },
        //准确阴阳性判断
        correctYinYang() {
            this.AIEvaluationForm.expertAdvice =
                this.AIEvaluationForm.masculineAi;
            this.putExpertOpinion();
        },
        //错误阴阳性判断
        errorYinYang() {
            if (this.AIEvaluationForm.masculineAi == '阳性') {
                this.AIEvaluationForm.expertAdvice = '阴性';
            } else if (this.AIEvaluationForm.masculineAi == '阴性') {
                this.AIEvaluationForm.expertAdvice = '阳性';
            } else {
                this.AIEvaluationForm.expertAdvice = '';
            }
            this.putExpertOpinion();
        },
        //医生第一次打开病人切片浏览器的时间
        doctorOpenViewerTime(pBiopsyid) {
            this.$axios({
                methods: 'GET',
                url: `/PROXY-Remote/biopsy/recordStartDiagnosisTime/${pBiopsyid}/${this.$route.query.userId}`,
            }).then((res) => {
                console.log('打开切片浏览器', res);
            });
        },
        //医生最后提交评价的时间
        doctorSubmitEvaluationTime(pBiopsyid) {
            this.$axios({
                methods: 'GET',
                url: `/PROXY-Remote/biopsy/recordEndDiagnosisTime/${pBiopsyid}/${this.$route.query.userId}`,
            }).then((res) => {
                console.log('提交评价', res);
            });
        },
        //当前第几张/共多少张
        sliceQualityEvaluateRank() {
            let mData = {
                keyWord: this.$route.query.searchPathologyId,
                pid: this.newBiopsyid,
                //pupAndDown: '',
                slicePurpose: this.$route.query.slicePurpose,
                sliceQualityStatus: this.$route.query.sliceQualityStatus,
            };
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/sliceQualityEvaluateRank`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.qualityEvaluationForm.currentSerialNumber =
                        res.data.data;
                } else {
                    this.$message.info(res.data.message);
                }
            });
        },
        //通过切片序号找切片
        findSliceByCurrentBiopsyCount() {
            if (this.qualityEvaluationForm.serialNumber == '') {
                this.$message.info('请输入切片序号');
            } else {
                let mData = {
                    keyWord: this.$route.query.searchPathologyId,
                    pid: this.newBiopsyid,
                    pcurrentBiopsyCount: Number(
                        this.qualityEvaluationForm.serialNumber
                    ),
                    slicePurpose: this.$route.query.slicePurpose,
                    sliceQualityStatus: this.$route.query.sliceQualityStatus,
                };
                this.$axios({
                    method: 'POST',
                    url: `/PROXY-Remote/biopsy/findSliceByCurrentBiopsyCount`,
                    data: mData,
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this.newBiopsyid = res.data.data.id;
                        this.$refs.openseadragon.open(
                            `${this.pathologyServiceURL}/images/${res.data.data.newFilename}.dzi`
                        );
                        this.getBiopsyAssess(this.newBiopsyid);
                        this.sliceQualityEvaluateRank();
                        this.getSliceInfoInfo(this.newBiopsyid);
                        this.$message.success('成功找到此切片');
                    } else {
                        this.$message.info(res.data.message);
                    }
                });
            }
        },

        //上一张
        scanerPrev() {
            let mData = {
                keyWord: this.$route.query.searchPathologyId,
                pid: this.newBiopsyid,
                pupAndDown: 'up',
                slicePurpose: this.$route.query.slicePurpose,
                sliceQualityStatus: this.$route.query.sliceQualityStatus,
            };
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/findNextAndPreviousBiopsy`,
                data: mData,
            }).then(async (res) => {
                if (res && res.data.code === 200) {
                    this.newBiopsyid = res.data.data.id;
                    const filename = res.data.data.newFilename;
                    this.getBiopsyAssess(this.newBiopsyid);
                    this.sliceQualityEvaluateRank();
                    this.getSliceInfoInfo(this.newBiopsyid);
                    const isSdpc = filename.endsWith('sdpc');
                    this.sourceType = isSdpc ? 'IIIF' : 'DZI';
                    this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;
                    if (isSdpc) {
                        await this.getImageInfo(filename);
                    } else {
                        this.openseadragonIsShow = false;
                        this.newTimer = new Date().getTime();
                        this.openseadragonIsShow = true;
                        // this.$refs.openseadragon.open(
                        //     `${this.pathologyServiceURL}/images/${filename}.dzi`
                        // );
                    }
                    this.$message.success('上一张切换成功');
                } else if (res.data.code === 404) {
                    this.$message.info(res.data.message);
                }
            });
        },
        //下一张
        scanerNext() {
            let mData = {
                keyWord: this.$route.query.searchPathologyId,
                pid: this.newBiopsyid,
                pupAndDown: 'down',
                slicePurpose: this.$route.query.slicePurpose,
                sliceQualityStatus: this.$route.query.sliceQualityStatus,
            };
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/findNextAndPreviousBiopsy`,
                data: mData,
            }).then(async (res) => {
                if (res && res.data.code === 200) {
                    this.newBiopsyid = res.data.data.id;
                    const filename = res.data.data.newFilename;
                    this.getBiopsyAssess(this.newBiopsyid);
                    this.sliceQualityEvaluateRank();
                    this.getSliceInfoInfo(this.newBiopsyid);
                    const isSdpc = filename.endsWith('sdpc');
                    this.sourceType = isSdpc ? 'IIIF' : 'DZI';
                    this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;

                    if (isSdpc) {
                        await this.getImageInfo(filename);
                    } else {
                        this.openseadragonIsShow = false;
                        this.newTimer = new Date().getTime();
                        this.openseadragonIsShow = true;
                        // this.$refs.openseadragon.open(
                        //     `${this.pathologyServiceURL}/images/${filename}.dzi`
                        // );
                    }
                    this.$message.success('下一张切换成功');
                } else if (res.data.code === 404) {
                    this.$message.info(res.data.message);
                }
            });
        },

        //扫描员此切片需要重扫
        rescan() {
            let mData = {
                biopsyId: this.newBiopsyid,
                sliceQualityStatus: 2,
                scanDefinition: '需重扫',
            };
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('提交重新扫描成功');
                    this.scanerNext();
                }
            });
        },
        getBiopsyAssess(biopsyId) {
            this.$axios({
                method: 'get',
                url: `/biopsy/findByIdOfSliceQualityEvaluate/${biopsyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.qualityEvaluationForm.biopsyQuality =
                        res.data.data.biopsyQuality || '';
                    this.qualityEvaluationForm.scanDefinition =
                        res.data.data.scanDefinition || '';
                    this.labelUrl = res.data.data.labelUrl || '';
                }
            });
        },
        //切片质量可以 直接通过提交并跳到下一张
        scanQualityPass() {
            let mData = {
                biopsyId: this.newBiopsyid,
                biopsyQuality: '甲',
                scanDefinition: '甲',
            };
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('提交成功');
                    this.scanerNext();
                }
            });
        },
        //扫描员提交切片质量
        submitEvaluate() {
            let mData = {
                biopsyId: this.newBiopsyid,
                biopsyQuality: this.qualityEvaluationForm.biopsyQuality,
                scanDefinition: this.qualityEvaluationForm.scanDefinition,
            };
            if (mData.scanDefinition === '需重扫') {
                mData.sliceQualityStatus = 2;
            }
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('提交成功');
                    this.getSliceInfoInfo(this.newBiopsyid);
                }
            });
        },
        search() {
            this.getAIEvaluationList();
        },
        watchDetail(row) {
            this.btnSureShow = false;
            this.$axios({
                method: 'get',
                url: `/PROXY-Remote/evaluate/get/${row.id}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationForm = res.data.data;
                    this.visibleDict.AIEvaluationDialog = true;
                }
            });
        },
        exampleTableButtonClick(functionKey, row) {
            this[functionKey](row);
        },
        exampleTablePageJumpTo(val) {
            this.pageInfo.page = val;
            // 为 exampleTable.data 赋值相应页上新数据
            this.getAIEvaluationList();
        },
        exampleTableSizeChange(val) {
            this.pageInfo.size = val;
            // 为 exampleTable.data 赋值相应数据量新数据
            this.getAIEvaluationList();
        },
        getAIEvaluationList() {
            this.$axios({
                method: 'post',
                url: '/PROXY-Remote/evaluate/findAll',
                data: {
                    page: this.pageInfo.page - 1,
                    size: this.pageInfo.size,
                    biopsyId: this.EvaluationFormFilter.biopsyId,
                    pathologyId: this.EvaluationFormFilter.pathologyId,
                },
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationDialogListTableData = res.data.data;
                    this.pageInfo.page = res.data.pageInfo.page + 1;
                    this.pageInfo.size = res.data.pageInfo.size;
                    this.pageInfo.total = res.data.pageInfo.total;
                }
            });
        },
        copyAiAnalysis() {
            this.AIEvaluationForm.expertAdvice =
                this.AIEvaluationForm.masculineAi;
            this.AIEvaluationForm.chronicInflammationExpertAdvice =
                this.AIEvaluationForm.chronicInflammationAi;
            this.AIEvaluationForm.imExpertAdvice = this.AIEvaluationForm.imAi;
            this.AIEvaluationForm.atrophyExpertAdvice =
                this.AIEvaluationForm.atrophyAi;
            this.AIEvaluationForm.activityExpertAdvice =
                this.AIEvaluationForm.activityAi;
            this.AIEvaluationForm.hpexpertAdvice = this.AIEvaluationForm.hpai;
            this.AIEvaluationForm.alienGrowthExpertAdvice =
                this.AIEvaluationForm.alienGrowthAi;
            this.putExpertOpinion();
        },
        dictionariesRequest(dictMap) {
            // 字典数据请求
            dictMap.forEach(async (map) => {
                const res = await this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                });

                if (res && res.data.code === 200) {
                    const result = res.data;
                    result.data.forEach((t) => {
                        this[map.array].push({
                            id: t.id,
                            label: t.name,
                        });
                    });
                }
            });
        },
        putExpertOpinion() {
            let _this = this;
            if (
                this.AIEvaluationForm.expertAdvice == '阳性' &&
                this.AIEvaluationForm.radio == ''
            ) {
                this.$message.info('请选择专家诊断');
                return;
            }
            this.AIEvaluationForm.biopsyId = this.biopsyId;
            this.$axios({
                method: 'put',
                url: '/PROXY-Remote/evaluate/save',
                data: this.AIEvaluationForm,
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        this.visibleDict.AIEvaluationDialog = false;
                        this.$message.info('提交成功');
                        this.getAIEvaluationList();
                        this.doctorSubmitEvaluationTime(_this.biopsyId);
                    } else {
                        this.$message.info(res.data.message);
                    }
                },
                (err) => {
                    this.$message.info(
                        `提交失败  ${err.response.data.message}`
                    );
                }
            );
        },

        expertOpinion() {
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/dicts/list',
                params: {
                    code: 'expertAdvice',
                    page: 0,
                    size: 99,
                },
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationFormList.expertAdviceList = res.data.data;
                }
            });
        },
        closeAIDialog() {
            this.visibleDict.AIEvaluationDialog = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener('keydown', _this.watchEnter);
        },
        closeExperimentDialog() { },
        closeAIEvaluationDialog() {
            this.visibleDict.AIEvaluationDialog = false;
            this.changeColor = -1;
        },
        annotationSelect(item) {
            let _this = this;
            _this.$refs.AIFloatingREF.locatedToParticularIndex(item);
        },
        becomeFullScreen() {
            if (this.isFullScreen) {
                this.isFullScreen = false;
            } else {
                this.isFullScreen = true;
            }
        },
        pictureToolPanelShow(type) {
            if (type == 1) {
                this.isSlicePanelShow = !this.isSlicePanelShow;
                this.isColorPanelShow = false;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = false;
                if(this.isSlicePanelShow){
                    this.changeColor = 30;
                }else{
                    this.changeColor = -1;
                }
            }
            if (type == 2) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = false;
                this.isSwitchPanelShow = false;
                this.isPencilPanelShow = !this.isPencilPanelShow;
                if(this.isPencilPanelShow){
                    this.changeColor = 29;
                }else{
                    this.changeColor = -1;
                }
            }
            if (type == 3) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = !this.isColorPanelShow;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = false;
                if(this.isColorPanelShow){
                    this.changeColor = 31;
                }else{
                    this.changeColor = -1;
                }
            }

            if (type == 4) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = false;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = !this.isSwitchPanelShow;
                if(this.isSwitchPanelShow){
                    this.changeColor = 32;
                }else{
                    this.changeColor = -1;
                }
            }
        },
        //对比度调节事件
        onContrastSlideChange(e) {
            this.coordinateColor.gama = 100;
            this.coordinateColor.light = 50;
            this.$refs.openseadragon.onContrastSlideChange(e);
        },
        //亮度调节事件
        onLightSlideInput(e) {
            this.coordinateColor.contrast = 100;
            this.coordinateColor.gama = 100;
            this.$refs.openseadragon.onLightSlideInput(e);
        },
        //gama调节事件
        onGamaSlideInput(e) {
            this.coordinateColor.contrast = 100;
            this.coordinateColor.light = 50;
            this.$refs.openseadragon.onGamaSlideInput(e);
        },
        //red调节事件
        onRedSlideInput(e) { },
        //yellow调节事件
        onYellowSlideInput(e) { },
        //blue调节事件
        onBlueSlideInput(e) { },
        //查询每个切片的阴性和阳性，AI智能预测的可疑点
        yinYangStatus() {
            let _this = this;
            this.biopsyList.forEach((item) => {
                // const c = item.originFilename.indexOf('.');
                // const name = item.originFilename.substring(0, c);
                const biopsyId = item.id;
                this.$axios({
                    method: 'GET',
                    url: `${this.AnnotationsServiceURL}/annotations/results/aiprediction/${biopsyId}`,
                }).then((res) => {
                    if (res.data.code === 200) {
                        // 数据处理
                        let predTxt = res.data.data.info.pred;
                        if (_this.transferPositiveToNegative(res.data.data)) {
                            predTxt = 0;
                        }
                        this.yinYangIcons.push({
                            id: biopsyId,
                            pred: predTxt,
                        });
                    }
                    this.yinYangMatch();
                });
            });
        },
        //阴阳性匹配
        yinYangMatch() {
            this.biopsyList.forEach((item) => {
                this.yinYangIcons.forEach((icon) => {
                    if (item.id == icon.id) {
                        item.pred = icon.pred;
                    }
                });
            });
            // this.drawerAi()
            console.log('biopsyList', this.biopsyList);
        },
        __clearAllDrawingTools() {
            if (this.pencilActive) {
                this.pencilActive = false;
                this.$refs.openseadragon.beginPencilDrawing(this.pencilActive);
            }
            if (this.polygonActive) {
                this.polygonActive = false;
                this.$refs.openseadragon.beginPolygonDrawing(this.pencilActive);
            }
            if (this.rectangleActive) {
                this.rectangleActive = false;
                this.$refs.openseadragon.beginRectangleDrawing(
                    this.rectangleActive
                );
            }
            if (this.measureDistanceActive) {
                this.measureDistanceActive = false;
                this.$refs.openseadragon.beginMeasuringDistance(
                    this.measureDistanceActive
                );
            }
            if (this.measureAreaActive) {
                this.measureAreaActive = false;
                this.$refs.openseadragon.beginMeasuringArea(
                    this.measureAreaActive
                );
            }
        },
        togglePencilLine() {
            if (this.changeColor === 22) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 22;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '涂抹',
                    });
                }
                this.$refs.openseadragon.beginPencilLineDrawing(
                    this.pencilActive
                );
            }
        },
        toggleArrow() {
            if (this.changeColor === 23) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 23;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '箭头',
                    });
                }
                this.$refs.openseadragon.beginArrowDrawing(this.pencilActive);
            }
        },
        togglePencil() {
            if (this.changeColor === 5) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 5;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '铅笔',
                    });
                }
                this.$refs.openseadragon.beginPencilDrawing(this.pencilActive);
            }
        },
        MHtogglePencil() {
            if (this.changeColor === 37) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 37;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '铅笔',
                    });
                }
                this.$refs.openseadragon.mhBeginPencilDrawing(this.pencilActive);

            }
        },
        toggleCircle() {
            if (this.changeColor === 21) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 21;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '圆形',
                    });
                }
                this.$refs.openseadragon.beginCircleDrawing(this.pencilActive);
            }
        },
        togglePolygon() {
            if (this.changeColor === 7) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 7;
                this.__clearAllDrawingTools();
                this.polygonActive = !this.polygonActive;
                if (this.polygonActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '铅笔',
                    });
                }
                this.$refs.openseadragon.beginPolygonDrawing(
                    this.polygonActive
                );
            }
        },
        toggleRectangle() {
            if (this.changeColor === 6) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 6;
                this.__clearAllDrawingTools();
                this.rectangleActive = !this.rectangleActive;
                if (this.rectangleActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '矩形',
                    });
                }

                this.$refs.openseadragon.beginRectangleDrawing(
                    this.rectangleActive
                );
            }
        },
        toggleMeasureDistance() {
            if (this.changeColor === 9) {
                this.changeColor = -1;
                this.__clearAllDrawingTools();
            } else {
                this.changeColor = 9;
                this.__clearAllDrawingTools();
                this.measureDistanceActive = !this.measureDistanceActive;
                this.$refs.openseadragon.beginMeasuringDistance(
                    this.measureDistanceActive
                );
            }
        },
        openseadragonOpen() {
            let _this = this;
            // setTimeout(function () {
            //   if (this.drawer) {
            //     _this.$refs.AIFloatingREF.locatedToFirstAnno();
            //   }
            // }, 2000);
        },
        toggleMeasureArea() {
            if (this.changeColor === 10) {
                this.changeColor = -1;
                this.__clearAllDrawingTools();
            } else {
                this.changeColor = 10;
                this.__clearAllDrawingTools();
                this.measureAreaActive = !this.measureAreaActive;
                this.$refs.openseadragon.beginMeasuringArea(
                    this.measureAreaActive
                );
            }
        },
        clearMeasure() {
            if (this.changeColor === 11) {
                this.changeColor = -1;
            } else {
                this.changeColor = 11;
                this.$refs.openseadragon.removeAllMeasureAnnotations();
                this.__clearAllDrawingTools();
                this.$refs.openseadragon.panToggle(true);
            }
        },
        goHome() {
            if (this.changeColor === 17) {
                this.changeColor = -1;
            } else {
                this.changeColor = 17;
                this.$refs.openseadragon.goHome();
            }
        },
        hideCallout() {
            if (!this.ifhideCallout) {
                this.changeColor = 8;
                this.ifhideCallout = true;
                this.annotationsDataInit = [];
            } else {
                this.ifhideCallout = false;
                this.changeColor = -1;
                this.annotationsDataInit = this.annotationsData;
            }
        },
        rotateRight() {
            this.changeColor = 18;
            if (this.viewerAngleCopy) {
                this.viewerAngle += this.viewerAngleCopy;
            } else {
                this.viewerAngle += 5;
            }
            this.viewerAngle %= 360;
            this.$refs.openseadragon.setRotation(this.viewerAngle);
        },
        rotateLeft() {
            this.changeColor = 19;
            if (this.viewerAngleCopy) {
                this.viewerAngle -= this.viewerAngleCopy;
            } else {
                this.viewerAngle -= 5;
            }
            this.viewerAngle %= 360;
            this.$refs.openseadragon.setRotation(this.viewerAngle);
        },
        // 右侧AI智能预测开关
        drawerAi() {
            if (!this.drawer && this.switchValue.AIAnalysis) {
                this.changeColor = 12;
                this.getAIAnnotations();
            } else {
                this.changeColor = -1;
                this.aiAnnotationsData = [];
                // AI定时器清除
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        drawerMHAi() {
            if (this.changeColor === 39) {
                this.changeColor = -1;
                this.mhAnnotationsData = [];
            } else {
                this.changeColor = 39;
                this.getMhAnnotations();
            }
        },
        AIEvaluationClose() {
            this.visibleDict.AIEvaluationDialogList = false;
            this.changeColor = -1;
            document.addEventListener('keydown', this.watchEnter);
        },
        AIEvaluation() {
            if (this.visibleDict.AIEvaluationDialogList) {
                this.visibleDict.AIEvaluationDialogList = false;
                this.changeColor = -1;
                document.addEventListener('keydown', this.watchEnter);
            } else {
                this.changeColor = 24;
                this.visibleDict.AIEvaluationDialogList = true;
                this.getAIEvaluationList();
                document.removeEventListener('keydown', this.watchEnter);
            }
        },
        isShowSliceInfo() {
            if (this.visibleDict.isShowSliceInfoStatus) {
                this.visibleDict.isShowSliceInfoStatus = false;
                document.addEventListener('keydown', this.watchEnter);
                this.changeColor = -1;
            } else {
                this.changeColor = 33;
                this.visibleDict.isShowSliceInfoStatus = true;
                document.removeEventListener('keydown', this.watchEnter);
            }
        },
        electronicPointer() {
            if (this.changeColor === 25) {
                this.changeColor = -1;
                this.isAllowDrawLine = false;
            } else {
                this.changeColor = 25;
                this.isAllowDrawLine = true;
            }

            const theCanvas = document.getElementById('ruler-overlay');
            theCanvas.style.cursor =
                'url(/images/electronicPointer.png),default';
            // const ctx = theCanvas.getContext('2d');
            // this.changeMouseInit(ctx, theCanvas);
        },
        changeMouseInit(ctx, canvas) {
            var body = [];
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var mouse_pos_x = canvas.width;
            var mouse_pos_y = canvas.height / 2;
            var delta = 1;
            var step = 0;
            var loop = 0;
            var line = 0;
            var lineMax = 20;
            var lineMin = 5;
            var TWO_PI = 2 * Math.PI;
            var t = 0;
            var op = 1;
            var bodyLength = 20;
            canvas.addEventListener('mousemove', mouse_track);
            function mouse_track(event) {
                if (
                    Math.abs(mouse_pos_x - event.clientX) > delta ||
                    Math.abs(mouse_pos_y - event.clientY) > delta
                ) {
                    mouse_pos_x = event.clientX;
                    mouse_pos_y = event.clientY;
                }
            }
            var red = [];
            var grn = [];
            var blu = [];
            const center = 128;
            const width = 127;
            const frequency1 = 0.3;
            const frequency2 = 0.3;
            const frequency3 = 0.3;
            const phase1 = 0;
            const phase2 = 2;
            const phase3 = 4;
            for (let s = 0; s < bodyLength; s++) {
                red[s] = Math.round(
                    Math.sin(frequency1 * s + phase1) * width + center
                );
                grn[s] = Math.round(
                    Math.sin(frequency2 * s + phase2) * width + center
                );
                blu[s] = Math.round(
                    Math.sin(frequency3 * s + phase3) * width + center
                );
            }
            var size = Math.min(canvas.width, canvas.height) / 50;
            //See below
            var startX = canvas.width;
            var startY = canvas.height / 2;
            for (let i = 0; i < bodyLength; i++) {
                body.push({
                    x: startX,
                    y: startY,
                });
            }
            //****** DRAW ******//
            function draw() {
                t += 0.08;
                t = t % TWO_PI;
                if (line <= lineMin) {
                    op = 1;
                    line = lineMin + 1;
                }
                if (line >= lineMax) {
                    op = -1;
                    line = lineMax - 1;
                }
                loop++;
                if (loop == 5) {
                    step++;
                    step = step % bodyLength;
                    loop = 0;
                }

                line = op + line;
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

                for (let i = body.length - 1; i > 0; i--) {
                    body[i].x = body[i - 1].x;
                    body[i].y = body[i - 1].y;
                }
                body[0].x = mouse_pos_x;
                body[0].y = mouse_pos_y;

                ctx.lineWidth = line;
                ctx.strokeStyle =
                    'rgb(' +
                    red[step] +
                    ',' +
                    grn[step] +
                    ',' +
                    blu[step] +
                    ')';
                ctx.fillStyle =
                    'rgb(' +
                    red[step] +
                    ',' +
                    grn[step] +
                    ',' +
                    blu[step] +
                    ')';
                //Draw leading circle
                ctx.beginPath();
                ctx.arc(body[0].x, body[0].y, line / 2, 0, TWO_PI);
                ctx.fill();
                //Draw line
                ctx.beginPath();
                ctx.moveTo(body[0].x, body[0].y);
                for (let s = 0; s < body.length - 2; s++) {
                    //Bezier curve along points taken from:
                    var xc = (body[s].x + body[s + 1].x) / 2;
                    var yc = (body[s].y + body[s + 1].y) / 2;
                    ctx.quadraticCurveTo(body[s].x, body[s].y, xc, yc);
                }
                ctx.stroke();
                //Draw trailing circle
                ctx.beginPath();
                ctx.arc(xc, yc, line / 2, 0, TWO_PI);
                ctx.fill();
                window.requestAnimationFrame(draw);
            }
            window.requestAnimationFrame(draw);
        },
       
        isShowDiagnosticBasis() {
            if (this.diagnosticBasisData.showStatus) {
                this.diagnosticBasisData.showStatus = false;
                this.changeColor = -1;
            } else {
                this.changeColor = 34;
                this.diagnosticBasisData.showStatus = true;
            }
        },
        showClinicalDialogVisible() {
            if (this.clinicalDialogVisible) {
                this.clinicalDialogVisible = false;
                this.changeColor = -1;
            } else {
                this.changeColor = 36;
                this.clinicalDialogVisible = true;
            }
        },
        AIEvaluationDialogShow() {
            if (this.visibleDict.AIEvaluationDialog) {
                this.visibleDict.AIEvaluationDialog = false;
                document.addEventListener('keydown', this.watchEnter);
            } else {
                Object.keys(this.AIEvaluationForm).forEach((key) => {
                    if (
                        key == 'chronicInflammationAi' ||
                        key == 'masculineAi' ||
                        key == 'imAi' ||
                        key == 'atrophyAi' ||
                        key == 'activityAi' ||
                        key == 'hpai' ||
                        key == 'alienGrowthAi' ||
                        key == 'pathologyId' ||
                        key == 'evaluateExpert' ||
                        key == 'sliceName'
                    ) {
                    } else {
                        this.AIEvaluationForm[key] = '';
                    }
                });
                this.AIEvaluationForm.pathologyId = this.pathologyId;
                this.AIEvaluationForm.evaluateExpert = this.userName;
                this.visibleDict.AIEvaluationDialog = true;
                document.removeEventListener('keydown', this.watchEnter);
                this.btnSureShow = true;
                this.$axios({
                    method: 'GET',
                    url: `/PROXY-Remote/evaluate/get/by/biopsy/${this.biopsyId}`,
                }).then(
                    (res) => {
                        if (res.data.data && res.data.code === 200) {
                            this.AIEvaluationForm = res.data.data;
                        }
                    },
                    (err) => {
                        this.$message.info(err.response.data.message);
                    }
                );
            }
        },
        analysisAI() {
            if (this.Ifanalysis) {
                this.Ifanalysis = false;
                this.changeColor = -1;
            } else {
                this.changeColor = 20;
                this.Ifanalysis = true;
            }
        },
        patienterListMethod() {
            this.changeColor = 2;
            this.visibleDict.patienterList = true;
            const _this = this;
            document.removeEventListener('keydown', _this.watchEnter);
        },
        DiagnosisListclosed() {
            this.visibleDict.patienterList = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener('keydown', _this.watchEnter);
        },
        patienterDetailMethod() {
            this.changeColor = 4;
            this.visibleDict.patienterDetail = true;
            const _this = this;
            document.removeEventListener('keydown', _this.watchEnter);
            console.log(
                'patienterDetailMethod',
                this.visibleDict.patienterDetail
            );
        },
        patienterDetailclosed() {
            this.visibleDict.patienterDetail = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener('keydown', _this.watchEnter);
            console.log(
                'patienterDetailclosed',
                this.visibleDict.patienterDetail
            );
        },
        selectStyle(item) {
            const _this = this;
            this.$nextTick(function () {
                this.annotationsData.forEach((item1) => {
                    _this.$set(item1, 'active', false);
                });
                // this.$set(item, "active", true);
            });
        },
        outStyle(item) {
            this.$set(item, 'active', false);
        },
        hotkeyMethods() {
            this.changeColor = 16;
            this.hotkey = true;
        },
        hotkeyclosed() {
            this.changeColor = -1;
            this.hotkey = false;
        },
        updateDiagnoseCollection(diagnosisId) {
            this.collectionDignosis.addOrUpdate(
                this.$route.query.userId,
                {
                    diagnosisId,
                },
                true
            );
        },
        getBiopsyNoPathologyId() {
            this.openseadragonIsShow = false;
            const filename = this.$route.query.fileName;
            const isSdpc = filename.endsWith('sdpc');
            this.sourceType = isSdpc ? 'IIIF' : 'DZI';
            this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;
            if (isSdpc) {
                this.getImageInfo(filename);
            } else {
                this.newTimer = new Date().getTime();
                this.openseadragonIsShow = true;
            }
            this.$refs.openseadragon.open(
                `${this.pathologyServiceURL}/images/${filename}.dzi`
            );
            this.ifOpenseadragon = true;
        },
        getBiopsy(id) {
            const pDiagnosisType = sessionStorage.getItem('pDiagnosisType');
            console.log('pDiagnosisType', pDiagnosisType);
            if (id != 'null') {
                this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/diagnosis/single',
                    params: {
                        pathologyId: id,
                        pDiagnosisType: pDiagnosisType,
                    },
                }).then((res) => {
                    // 请求失败
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    }
                    // 请求成功
                    const result = res.data.data;
                    this.prevPathologyId = result.previousPathologyId;
                    this.nextPathologyId = result.nextPathologyId;
                    this.diagnosisId = result.id;
                    if (result.collectionId) {
                        this.isCollected = result.collectionId
                    } else {
                        this.isCollected = null
                    }
                    this.biopsyList = result.biopsyList;
                    this.currentPath = result.biopsyList[0]
                    this.currentLevelLabel = result.currentLevelLabel;

                    this.specimenType = result.specimenType;

                    //查询每个切片的阴阳性
                    if (
                        this.specimenType === 1577 ||
                        this.specimenType === 1579 ||
                        this.specimenType === 1565 ||
                        this.specimenType === 1567
                    ) {
                        this.yinYangStatus();
                    }

                    // 诊断详情
                    this.pathologyId = id;
                    // 发送更新请求
                    if (this.collectionDignosis) {
                        this.updateDiagnoseCollection(this.pathologyId);
                    }
                    result.currentCountVersusTotal =
                        result.currentCountVersusTotal
                            ? result.currentCountVersusTotal
                            : '0/0';
                    this.info = `
                        <span> 当前第 </span><span style="color:#000;font-size:18px;color:#10a1df">${result.currentCountVersusTotal.split('/')[0]
                        }</span><span > 例 / 共 </span><span style="color:#000;font-size:18px;color:#10a1df">${result.currentCountVersusTotal.split('/')[1]
                        }</span><span> 例 </span>&nbsp&nbsp
                        病理号:${result.pathologyId}&nbsp&nbsp
                        <font style="padding: 0 4px; color: #F56C6C;"> ${result.name ? result.name : '暂无'
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${result.sexName ? result.sexName : '暂无'
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${result.age ? result.age : '暂无'
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${result.ageUnitName && result.age
                            ? result.ageUnitName
                            : ''
                        }</font>
                        <font style="padding: 0 4px;">${result.bedId ? result.bedId : ''
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;"> ${result.freezeTypeName ? result.freezeTypeName : ''
                        }</font>
                        检查类型:${result.checkCategoryName
                            ? result.checkCategoryName
                            : ''
                        }&nbsp&nbsp
                        标本类别: ${result.specimenTypeName
                            ? result.specimenTypeName
                            : '暂无'
                        }&nbsp&nbsp
                        取材脏器:${result.sampleOrganName
                            ? result.sampleOrganName
                            : '暂无'
                        } &nbsp&nbsp
                        送检医生:${result.sendDoctor ? result.sendDoctor : '暂无'
                        }&nbsp&nbsp
                        送检科室: 暂无 &nbsp&nbsp
                        临床诊断:${result.pathologyClinicalDiagnosis
                            ? result.pathologyClinicalDiagnosis
                            : '暂无'
                        }
                        &nbsp&nbsp
                        状态:${result.currentLevelLabel
                            ? result.currentLevelLabel
                            : '暂无'
                        }&nbsp&nbsp
                        取材时间:${result.createTime ? result.createTime : '暂无'
                        }&nbsp&nbsp
                        `;

                    // 通过切片获取标注
                    if (id === this.$route.query.pathologyId) {
                        result.biopsyList.forEach((element, index) => {
                            if (
                                element.newFilename ===
                                this.$route.query.fileName
                            ) {
                                this.getAnnotations(
                                    element.id,
                                    element.newFilename,
                                    element.originFilename,
                                    element.labelUrl,
                                    index
                                );
                            }
                        });
                    } else if (
                        id !== this.$route.query.pathologyId &&
                        result.biopsyList.length > 0
                    ) {
                        // 重新获取标注
                        this.getAnnotations(
                            result.biopsyList[0].id,
                            result.biopsyList[0].newFilename,
                            result.biopsyList[0].originFilename,
                            result.biopsyList[0].labelUrl
                        );
                    } else {
                        this.ifOpenseadragon = false;
                        this.labelUrl = '';
                        this.annotationsDataInit = [];
                        this.annotationsData = [];
                        this.$message.info('该诊断无切片');
                    }
                    //从上一页点哪个切片 切片浏览器哪张切片类是isActive  红框
                    const index = _.findIndex(this.biopsyList, {
                        id: this.biopsyId,
                    });
                    this.isActive = index;
                });
            }
        },

        // 界面左侧，  点击获取标注 biopsyID切片Id 切片新名字 切片老名字 切片信息图片url
        getAnnotations(
            biopsyID,
            biopsyfileName,
            biopsyOriginFilename,
            labelUrl,
            index
        ) {
            this.biopsyName = biopsyfileName
            this.openseadragonIsShow = false;
            if (biopsyfileName !== null && biopsyOriginFilename !== null) {
                this.biopsyId = biopsyID;
                this.biopsyOriginFilename = biopsyOriginFilename;
                this.labelUrl = labelUrl;
                if (this.drawer) {
                    this.getAIAnnotations();
                }
            }
            // 重新打开切片
            let myFile = '';
            this.biopsyList.forEach((item) => {
                if (item.id == biopsyID) {
                    myFile = item.newFilename;
                }
            });
            this.dziUrl = `${this.pathologyServiceURL}/images/${myFile}.dzi`;
            const filename = biopsyfileName;
            const isSdpc = filename.endsWith('sdpc');
            this.sourceType = isSdpc ? 'IIIF' : 'DZI';
            if (isSdpc) {
                this.getImageInfo(filename);
            } else {
                this.newTimer = new Date().getTime();
                this.openseadragonIsShow = true;
            }
            if (index || index == 0) {
                this.isActive = index;
            } else {
                this.isActive = 0;
            }

            this.annotationsDataInit = [];
            this.annotationsData = [];

            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/biopsy/single/${biopsyID}`,
            }).then((resp) => {
                // 请求失败
                if (resp.data.code !== 200) {
                    throw new Error(resp.data);
                }
                // 请求成功
                this.AIEvaluationForm.sliceName = resp.data.data.originFilename;
                this.getSliceInfoInfo(biopsyID);
                // 数据处理
                resp.data.data.annotationsList.forEach((ele) => {
                    const temPoints = [];
                    const areaInfo = {
                        width: ele.extraMessageJson
                            ? (ele.extraMessageJson.width * 1000000).toFixed(3)
                            : '',
                        height: ele.extraMessageJson
                            ? (ele.extraMessageJson.height * 1000000).toFixed(3)
                            : '',
                        area: ele.extraMessageJson
                            ? (
                                ele.extraMessageJson.area *
                                1000000 *
                                1000000
                            ).toFixed(3)
                            : '',
                    };
                    ele.pointsJson.forEach((item) => {
                        const coord1 = ['points', item[0], item[1]];
                        temPoints.push(coord1);
                    });
                    const object = {
                        annotationId: ele.id,
                        createAt: ele.createTime,
                        saveUser: ele.createUserId,
                        remarkOne: ele.remarkOne,
                        remarkTwo: ele.remarkTwo,
                        classToSet: {
                            color: '#b31a1a',
                            name: '胃癌',
                        },
                        points: temPoints,
                        name: '胃癌',
                        children: ele.childrenJson,
                        show: true,
                        saveUserName: ele.createUserName,
                        type: ele.extraMessageJson.type,
                        imageUrl: this.ImageServiceURL + ele.imageUrl,
                        extraMessageJson: ele.extraMessageJson,
                        areaInfo,
                    };
                    this.annotationsData.push(object);
                    this.annotationsDataInit = _.cloneDeep(
                        this.annotationsData
                    );
                });
                this.collectionAnnotationImages.addOrUpdate(
                    this.$route.query.userId,
                    {
                        annotationsData: this.annotationsData,
                    },
                    true
                );
            });
            // this.$refs.openseadragon.open(
            //     `${this.pathologyServiceURL}/images/${myFile}.dzi`
            // );
            this.ifOpenseadragon = true;
            this.drawerAi();
        },
        annotationDrawingEnd(annotations) {
            console.log('annotationDrawingEnd', annotations);
            annotations.forEach((temp) => {
                if (!temp.show) {
                    this.newannotations.push(temp);
                    this.visibleDict.annotationsWarn = true;
                }
            });
            if (this.switchValue.groupMark && !!this.groupMark.note) {
                this.mark.warning = this.groupMark.note;
                this.mark.remark = this.groupMark.remark;
            }
        },
        //画圈请求分析
        mhAnnotationDrawingEnd(annotations) {
            this.mhAnnotationsDataDrawEnd = annotations
            if (this.changeColor === 37) {
                this.loading = true;
                let Mpoints = []
                annotations[annotations.length - 1].points.forEach(item => {
                    Mpoints.push({ X: item.x, Y: item.y })
                })
                console.log('Mpoints', Mpoints)
                let mData = { biopsyName: this.biopsyName, biopsyId: this.biopsyId, xmlText: JSON.stringify(Mpoints) }
                this.$axios({
                    method: 'POST',
                    url: `/PROXY-Remote/mhIndex/tagging`,
                    data: mData,
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this.loading = false;
                        this.$message.success('分析需要耗时，请等待1分钟后再查看')
                    } else {
                        this.$message.warning(res.data.message);
                    }
                });
            }

        },
        // 获取mh标注
        getMhAnnotations() {
            let _this = this;
            _this.loading = true
            _this.mhAnnotationsData = []
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/mhIndex/list/${this.biopsyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    let i = 1;
                    res.data.data.forEach((ele) => {
                        const temPoints = [];
                        JSON.parse(ele.xmlText).forEach((item) => {
                            const coord1 = [
                                'points',
                                item.X,
                                item.Y,
                            ];
                            temPoints.push(coord1);
                        });
                        const object = {
                            annotationId: i++,
                            classToSet: {
                                color: '#0000FF',
                                name: 'MH',
                            },
                            points: temPoints,
                            name: 'MH结果',
                            show: true,
                            type: 'Polygon',
                        };
                        _this.mhAnnotationsData.push(object);
                    });
                    _this.loading = false

                } else {
                    this.$message.warning(res.data.message);
                }
            });
        },
        getMhIndexList() {
            if (this.changeColor === 38) {
                this.changeColor = -1
            } else {
                this.changeColor = 38
                this.cancelAnn();
                this.$refs.openseadragon.zoomJumpTo(2.5);
                let _this = this;
                _this.mhAnnotationsData = []

                this.$axios({
                    method: 'GET',
                    url: `/PROXY-Remote/mhIndex/list/${this.biopsyId}`,
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        let i = 1;
                        res.data.data.forEach((ele) => {
                            const temPoints = [];
                            JSON.parse(ele.xmlText).forEach((item) => {
                                const coord1 = [
                                    'points',
                                    item.X,
                                    item.Y,
                                ];
                                temPoints.push(coord1);
                            });
                            const object = {
                                annotationId: i++,
                                classToSet: {
                                    color: '#0000FF',
                                    name: 'MH',
                                },
                                points: temPoints,
                                name: 'MH结果',
                                show: true,
                                type: '',
                            };
                            _this.mhAnnotationsData.push(object);
                        });

                        this.MHData = res.data.data.map((item, index) => { return { ...item, index: index + 1 } })
                        this.mhDialogVisible = true
                    } else {
                        this.$message.warning(res.data.message);
                    }
                });
            }
        },
        //MHdialog框内表格的操作 回显
        resetOnePoint(row) {
            this.mhDialogVisible = false
            this.mhAnnotationsData = []
            const temPoints = [];
            JSON.parse(row.xmlText).forEach((item) => {
                const coord1 = [
                    'points',
                    item.X,
                    item.Y,
                ];
                temPoints.push(coord1);
            });
            const object = {
                annotationId: 1,
                classToSet: {
                    color: '#0000FF',
                    name: 'MH',
                },
                points: temPoints,
                name: 'MH结果',
                show: true,
                type: 'Polygon',
            };
            this.mhAnnotationsData.push(object);

            const val = this.mhAnnotationsDataDrawEnd[row.index - 1]
            this.$refs.openseadragon.jumpToArea(
                val.data.minX,
                val.data.minY,
                val.data.minX + val.data.pixelsWidth,
                val.data.minY + val.data.pixelsHeight
            );
        },
        deletePoint(row){
            this.$axios({
                method: 'delete',
                url: `/PROXY-Remote/mhIndex/${row.id}`,
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        this.getMhAnnotations()
                        this.$message.success('删除成功')
                    }
                },
                (err) => {
                    this.$message.info(`${err.response.data.message}`);
                }
            );
        },
        //关闭MHdialog框
        closeMHDialog() {
            this.changeColor = -1
        },

        // 1.画画工具画笔标注， 标注完成后， 删除标注的时候触发， 2. 跳转
        aiAnnotationDrawingEnd(AIannotations) {
            console.log('1111111111111111', AIannotations)
            if (AIannotations.length > 0) {
                AIannotations.forEach((item, index) => {
                    item['inIndex'] = index + 1;
                });
                this.AIdata = AIannotations;
                this.drawer = true;
                this.currentSuspicious = this.AIdata[0];
            } else {
                this.drawer = false;
            }
        },
        //  画画工具画笔标注， 点击他的时候触发
        uploadAnnotation(annotation) {
            const { x, y, width, height } =
                annotation.option.type == 'circle'
                    ? annotation.circlePath.bounds
                    : annotation.path.bounds;
            const imgURL = this.$refs.openseadragon.getImage(
                x,
                y,
                width,
                height
            );

            const MIME_TYPE = 'image/png';
            const dlLink = document.createElement('a');
            //   dlLink.download = '123.png';
            this.newPic = imgURL;
            dlLink.href = imgURL;
            dlLink.dataset.downloadurl = [
                MIME_TYPE,
                dlLink.download,
                dlLink.href,
            ].join(':');

            document.body.appendChild(dlLink);
            dlLink.click();
            document.body.removeChild(dlLink);
        },
        jumpToNumber(val) {
            const pDiagnosisType = sessionStorage.getItem('pDiagnosisType');
            this.$axios({
                method: 'get',
                url: `/PROXY-Remote/diagnosis/id/by/rank/${val}/${pDiagnosisType}`,
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        sessionStorage.setItem('pathologyId', res.data.data);

                        this.getBiopsy(res.data.data);
                    }
                },
                (err) => {
                    this.$message.info(`${err.response.data.message}`);
                }
            );
        },
        // 取消标注
        cancelAnn() {
            this.__clearAllDrawingTools();
            this.$refs.openseadragon.panToggle(true);
        },
        Submit() {
            if (!this.validateForm()) {
                return;
            }
            this.groupMark.note = this.mark.warning;
            this.groupMark.remark = this.mark.remark;
            this.visibleDict.annotationsWarn = false;
            this.uploadPic(this.newPic);
        },
        // 提交标注
        submitAnnotation(uploadPictTemp) {
            const temp = this.newannotations[this.newannotations.length - 1];
            const pointsTmp = [];
            const Annotationinfo = {
                minX: temp.data.minX,
                minY: temp.data.minY,
                pixelsWidth: temp.data.pixelsWidth,
                pixelsHeight: temp.data.pixelsHeight,
                pixelsArea: temp.data.pixelsArea,
                width: temp.data.width,
                height: temp.data.height,
                area: temp.data.area,
                type: temp.option.type,
            };
            temp.points.forEach((ele) => {
                pointsTmp.push([ele.x, ele.y]);
            });
            const postdata = {
                points: JSON.stringify(pointsTmp),
                children: JSON.stringify([]),
                diagnosisId: this.diagnosisId,
                imageUrl: uploadPictTemp,
                extraMessage: JSON.stringify(Annotationinfo),
                remarkOne: this.mark.warning,
                remarkTwo: this.mark.remark,
            };
            try {
                this.$axios({
                    method: 'post',
                    // url: `/PROXY-Remote/biopsy/${this.biopsyId}/annotations`,
                    url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations`,
                    data: postdata,
                    headers: {
                        'Content-Type': 'application/json',
                        authorization: this.$store.state.authorization,
                    },
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            console.log(res);
                            this.newannotations = [];
                            this.mark.warning = '';
                            this.mark.remark = '';
                            const areaInfo = {
                                width: res.data.data.extraMessageJson
                                    ? (
                                        res.data.data.extraMessageJson.width *
                                        1000000
                                    ).toFixed(3)
                                    : '',
                                height: res.data.data.extraMessageJson
                                    ? (
                                        res.data.data.extraMessageJson
                                            .height * 1000000
                                    ).toFixed(3)
                                    : '',
                                area: res.data.data.extraMessageJson
                                    ? (
                                        res.data.data.extraMessageJson.area *
                                        1000000 *
                                        1000000
                                    ).toFixed(3)
                                    : '',
                            };
                            const temPoints = [];
                            res.data.data.pointsJson.forEach((item) => {
                                const coord1 = ['points', item[0], item[1]];
                                temPoints.push(coord1);
                            });
                            const object = {
                                annotationId: res.data.data.id,
                                createAt: res.data.data.createTime,
                                saveUser: res.data.data.createUserId,
                                remarkOne: res.data.data.remarkOne,
                                remarkTwo: res.data.data.remarkTwo,
                                points: temPoints,
                                classToSet: {
                                    color: '#b31a1a',
                                    name: '胃癌',
                                },
                                name: '胃癌',
                                show: true,
                                saveUserName: res.data.data.createUserName,
                                type: 'polygon',
                                imageUrl:
                                    this.ImageServiceURL +
                                    res.data.data.imageUrl,
                                extraMessageJson:
                                    res.data.data.extraMessageJson,
                                areaInfo,
                            };
                            this.annotationsData.push(object);
                            this.collectionAnnotationImages.addOrUpdate(
                                this.$route.query.userId,
                                {
                                    annotationsData: this.annotationsData,
                                },
                                true
                            );
                        }
                    },
                    (err) => {
                        this.newannotations = [];
                        this.mark.warning = '';
                        this.mark.remark = '';
                        this.$message.info(
                            `新增失败 ${err.response.data.message}`
                        );
                    }
                );
            } catch (e) {
                console.log('请求失败');
            }
        },
        // 上传切片图片
        uploadPic(imgBase) {
            try {
                const data1 = { imgBase64: imgBase };
                this.$axios({
                    method: 'post',
                    // url: "/PROXY-annotationPicService/base/upload",
                    url: `${this.ImageServiceURL}/base/upload`,
                    data: qs.stringify(data1),
                    headers: {
                        defaultHeader: false,
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                }).then(
                    (res) => {
                        if (res.data.status === 'success') {
                            const uploadPictTemp = res.data.url.slice(
                                res.data.url.indexOf('_') - 1
                            );
                            console.log('upload success', res.data.url);
                            console.log('uploadPictTemp', uploadPictTemp);
                            this.annotationImages.push(res.data.url);
                            this.submitAnnotation(uploadPictTemp);
                        }
                    },
                    (err) => {
                        this.$message.info(
                            `标注图新增失败${err.response.data}`
                        );
                    }
                );
            } catch (e) {
                console.log('请求失败');
            }
        },
        annotationsWarnCancel() {
            this.$refs.openseadragon.panToggle(true);
            const { id } = this.newannotations[this.newannotations.length - 1];
            this.$refs.openseadragon.removeAnnotation(id);
            this.visibleDict.annotationsWarn = false;
        },
        // 全屏
        sreenFull() {
            if (
                !document.fullscreenElement &&
                !document.msFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.webkitFullscreenElement
            ) {
                let docElm = document.documentElement;
                this.changeColor = 15;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                } else if (docElm.msRequestFullscreen) {
                    // IE
                    docElm = document.body; // overwrite the element (for IE)
                    docElm.msRequestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                    // 火狐
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                    // 谷歌
                    docElm.webkitRequestFullScreen();
                }
            } else if (document.exitFullscreen) {
                this.changeColor = -1;
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        },
        // 截图
        screenshot() {
            document.removeEventListener('keydown', this.watchEnter);
            this.changeColor = 13;
            $('#drawRectCanvas').show();
            const shadeCs1 = document.getElementById('shadeCanvas');
            const shadeContext1 = shadeCs1.getContext('2d');
            // 填充页面覆盖色
            shadeContext1.fillStyle = 'rgba(43, 42, 42, 0.5)';
            shadeContext1.fillRect(0, 0, shadeCs1.width, shadeCs1.height);
            $('#shadeCanvas').show();
            const color = 'white';
            const penWidth = 1;
            const rectCanvas = document.getElementById('drawRectCanvas');
            // canvas 的矩形框
            const canvasRect = rectCanvas.getBoundingClientRect();
            // canvas 矩形框的左上角坐标
            const canvasLeft = canvasRect.left;
            const canvasTop = canvasRect.top;
            let lastWidth = 0;
            let lastHeight = 0;
            // 要画的矩形的起点 xy
            let width = 0;
            let height = 0;
            let x = 0;
            let y = 0;
            // 鼠标点击按下事件，画图准备
            rectCanvas.onmousedown = function (e) {
                // 设置遮罩层填充色
                const shadeCs = document.getElementById('shadeCanvas');
                const shadeContext = shadeCs.getContext('2d');
                // 确定起点
                x = e.clientX;
                y = e.clientY;
                // 添加layer
                $('#drawRectCanvas').addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name: 'areaLayer',
                    fromCenter: false,
                    x,
                    y,
                    width: 1,
                    height: 1,
                });
                // 绘制
                $('#drawRectCanvas').drawLayers();
                $('#drawRectCanvas').saveCanvas();
                // 鼠标移动事件，画图
                // eslint-disable-next-line no-shadow
                rectCanvas.onmousemove = function (e) {
                    lastWidth = width;
                    lastHeight = height;
                    // 要画的矩形的宽高
                    width = e.clientX - canvasLeft - x;
                    height = e.clientY - canvasTop - y;
                    shadeContext.fillRect(x, y, lastWidth, lastHeight);
                    // 清楚上一次鼠标移动画的框
                    $('#drawRectCanvas').removeLayer('areaLayer');
                    $('#drawRectCanvas').addLayer({
                        type: 'rectangle',
                        strokeStyle: color,
                        strokeWidth: penWidth,
                        name: 'areaLayer',
                        fromCenter: false,
                        x,
                        y,
                        width,
                        height,
                    });
                    $('#drawRectCanvas').drawLayers();
                    shadeContext.clearRect(x, y, width, height);
                };
            };
            const that = this;
            rectCanvas.onmouseup = function (e) {
                rectCanvas.onmousemove = null;
                width = e.clientX - canvasLeft - x;
                height = e.clientY - canvasTop - y;
                $('#drawRectCanvas').removeLayer('areaLayer');
                $('#drawRectCanvas').addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name: 'areaLayer',
                    fromCenter: false,
                    x,
                    y,
                    width,
                    height,
                });
                $('#drawRectCanvas').drawLayers();
                $('#drawRectCanvas').saveCanvas();
                $('#canvasToolbar').css('display', 'block');
                $('#canvasToolbar').css(
                    'left',
                    `${width > 0
                        ? x + width
                        : Math.abs(width + x) + Math.abs(width)
                    }px`
                );
                $('#canvasToolbar').css(
                    'top',
                    `${height > 0 ? height + y : y}px`
                );
                $('#drawRectCanvas').hide();
                // 移除画的选取框
                $('#drawRectCanvas').removeLayer('areaLayer');
                // 隐藏画框的canvass
                $('#drawRectCanvas').hide();
                // 添加描述输入框
                const pr = $('#prescription');
                // 横向排列
                pr.css('display', 'flex'); // 横向排列
                pr.css('justify-content', 'center'); // 横向排列居中
                pr.css('z-index', 9999); // 浮动在最上层
                pr.css('position', 'absolute');
                pr.css('border', 'none'); // 去掉边框
                pr.css(
                    'font-size',
                    `${(Math.abs(width) / document.body.clientWidth) * 100}%`
                ); // 文字大小
                pr.css('left', `${width > 0 ? x : Math.abs(width + x)}px`);
                pr.css('top', `${height > 0 ? height + y : y}px`);
                pr.css('width', `${Math.abs(width)}px`);
                $('#prescription').on('keydown', () => {
                    if (e.keyCode === 27) {
                        // $('#screenPC').trigger('click');
                        $('#cancel').trigger('click');
                    }
                });
                $('#SCinputBox').focus(); // 描述输入框获取焦点
                // 重置描述框的内容viewZoomNumber
                $('#rate')[0].innerText = `倍率:${document.getElementById('viewZoomNumber').innerText
                    }`; // 倍率
                const nowDate = new Date();
                const year = nowDate.getFullYear();
                const month = `0${nowDate.getMonth() + 1}`.substr(-2, 2);
                const date = `0${nowDate.getDate()}`.substr(-2, 2);
                const hour = `0${nowDate.getHours()}`.substr(-2, 2);
                const minute = `0${nowDate.getMinutes()}`.substr(-2, 2);
                const second = `0${nowDate.getSeconds()}`.substr(-2, 2);
                $(
                    '#screenshotTime'
                )[0].innerText = `${year}-${month}-${date} ${hour}:${minute}:${second}`; // 截屏时间
                $('#SCinputBox')[0].innerText = ''; // 输入框内容置空
                // 重置信息框样式框的内容
                $('#rate').css('width', '100%');
                $('#screenshotTime').css('width', '100%');
                // 判断倍率框或者日期框的字数超过1行，则重新布局
                // eslint-disable-next-line radix
                if (
                    Math.ceil(
                        $('#rate').height() /
                        parseInt(
                            $('#rate').css('line-height').replace('px', '')
                        )
                    ) > 1 ||
                    Math.ceil(
                        $('#screenshotTime')
                            // eslint-disable-next-line radix
                            .height() /
                        parseInt(
                            $('#screenshotTime')
                                .css('line-height')
                                .replace('px', '')
                        )
                    ) > 1
                ) {
                    pr.css('display', '');
                    pr.css('justify-content', '');
                } else {
                    $('#rate').css('width', '300px');
                    $('#screenshotTime').css('width', '500px');
                }
                // 鼠标抬起
                that.initWidth = width;
                that.initHeight = height;
                that.initX = x;
                that.initY = y;
                console.log(x, y, width, height);
            };
        },
        clipImage(x, y, width, height) {
            html2canvas(document.querySelector('body'), { scale: 1, dpi: 300, }).then((canvas) => {
                const scale = window.devicePixelRatio;
                const clipCanvas = document.createElement('canvas');
                clipCanvas.width = width * scale;
                clipCanvas.height = height * scale;
                const context = clipCanvas.getContext('2d');
                context.scale(1 / scale, 1 / scale);
                context.drawImage(
                    canvas,
                    x * scale,
                    y * scale,
                    width * scale,
                    height * scale,
                    0,
                    0,
                    width * scale,
                    height * scale
                );
                const clipedImageBase64 = clipCanvas.toDataURL();
                const img = document.createElement('a');
                img.href = clipedImageBase64;
                img.download = `${$('#SCinputBox')[0].innerText}.jpg`;
                img.click();
            });
        },
        sSuccess() {
            document.addEventListener('keydown', this.watchEnter);
            $('#canvasToolbar').css('display', 'none');
            const captureX =
                this.initWidth > 0
                    ? this.initX
                    : Math.abs(this.initX + this.initWidth);
            const captureY =
                this.initHeight > 0
                    ? this.initY
                    : Math.abs(this.initY + this.initHeight);
            this.clipImage(
                captureX,
                captureY,
                Math.abs(this.initWidth),
                Math.abs(this.initHeight) + $('#prescription').height()
            );
            const shadeCs = document.getElementById('shadeCanvas');
            const shadeContext = shadeCs.getContext('2d');
            shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height);
            $('#shadeCanvas').hide();
            $('#prescription').css('display', 'none');
            this.changeColor = -1;
        },
        sCancel() {
            document.addEventListener('keydown', this.watchEnter);
            $('#canvasToolbar').css('display', 'none');
            const shadeCs = document.getElementById('shadeCanvas');
            const shadeContext = shadeCs.getContext('2d');
            shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height);
            $('#shadeCanvas').hide();
            $('#prescription').css('display', 'none');
            // 加上键盘监听事件
            this.changeColor = -1;
        },
        // 子组件AlFlaoting 调用
        jumpTo(val) {
            if (!!val) {
                this.currentSuspicious = val;
                console.log(val)
                this.$refs.openseadragon.jumpToArea(
                    val.data.minX,
                    val.data.minY,
                    val.data.minX + val.data.pixelsWidth,
                    val.data.minY + val.data.pixelsHeight
                );
                // AI标注闪烁
                const annotation = _.find(this.AIdata, { id: val.id });
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = null;
                this.flag = true;
                if (!this.timerOne) {
                    this.timerOne = setInterval(() => {
                        this.AnnotationOpacity(annotation);
                    }, 150);
                }
                this.timer = setTimeout(() => {
                    clearInterval(this.timerOne);
                    this.timerOne = null;
                }, 700);
            }
        },
        // AI标注闪烁
        AnnotationOpacity(Annotation) {
            if (this.flag && this.switchValue.isFlicker) {
                Annotation.setOpacity(0);
                this.flag = false;
            } else if (this.switchValue.isFlicker) {
                Annotation.setOpacity(1);
                this.flag = true;
            }
        },
        //转化数字
        getProbablity(val) {
            var mNumber = Number(val);
            if (!isNaN(mNumber)) {
                return mNumber.toFixed(3);
            }
            return '0';
        },
        transferPositiveToNegative(value) {
            let isPositive = value.info.resultLevel.some(
                (item) => item.key === '属性' && item.value === '阳性'
            );
            let lessCount = 2;
            if (
                this.countOfTransferPostiveToNegativeList.length > 0 &&
                this.countOfTransferPostiveToNegativeList[0].label
            ) {
                lessCount = parseInt(
                    this.countOfTransferPostiveToNegativeList[0].label
                );
            }
            if (!isPositive) {
                return false;
            }
            let isCountLessThanSpecifcCount =
                value.annotations.length <= lessCount;
            if (isCountLessThanSpecifcCount) {
                return true;
            }
            return false;
        },

        // 获取AI标注
        getAIAnnotations() {
            // const c = this.biopsyOriginFilename.indexOf('.');
            // const name = this.biopsyOriginFilename.substring(0, c);

            let _this = this;
            _this.aiAnnotationsData = [];
            _this.doctorOpenViewerTime(_this.biopsyId);
            _this
                .$axios({
                    method: 'GET',
                    url: `${_this.AnnotationsServiceURL}/annotations/results/aiprediction/${_this.biopsyId}`,
                })
                .then((res) => {
                    _this.F3AnalysisInfo = '';
                    if (res.data.code === 200) {
                        // 数据处理
                        console.log('获取AI标注', res.data);

                        if (
                            _this.specimenType === 1577 ||
                            _this.specimenType === 1579 ||
                            this.specimenType === 1565 ||
                            this.specimenType === 1567
                        ) {
                            _this.F3info = res.data.data.info;
                            //阴性片子默认四倍放大 pred是标本类型 为胃镜病理才有的字段
                            if (res.data.data.info.pred == 0) {
                                setTimeout(() => {
                                    _this.$refs.openseadragon.zoomJumpTo(4);
                                }, 1000);
                            }
                            let mTransger = _this.transferPositiveToNegative(
                                res.data.data
                            );
                            _this.F3info.resultLevel.forEach((item) => {
                                if (item.key === '属性') {
                                    if (mTransger) {
                                        item.value = '阴性';
                                    }
                                    _this.AIEvaluationForm.masculineAi =
                                        item.value;
                                }
                                if (item.key === '肠化') {
                                    _this.AIEvaluationForm.imAi = item.value;
                                }
                                if (item.key === '萎缩') {
                                    _this.AIEvaluationForm.atrophyAi =
                                        item.value;
                                }
                                if (item.key === '活动性') {
                                    _this.AIEvaluationForm.activityAi =
                                        item.value;
                                }
                                if (item.key === '慢性炎症') {
                                    _this.AIEvaluationForm.chronicInflammationAi =
                                        item.value;
                                }
                                if (item.key === 'HP') {
                                    _this.AIEvaluationForm.hpai = item.value;
                                }
                                if (item.key === '异性增生') {
                                    _this.AIEvaluationForm.alienGrowthAi =
                                        item.value;
                                }

                                let mStr = '';
                                if (item.probablity) {
                                    mStr =
                                        '(' +
                                        _this.getProbablity(item.probablity) +
                                        ')';
                                }
                                _this.F3AnalysisInfo +=
                                    '<span style="margin-left:5px;color:#10a1df">' +
                                    item.key +
                                    '</span>' +
                                    ':<span style="margin-left:5px;color:#10a1df">' +
                                    item.value +
                                    mStr +
                                    '</span>';
                            });
                            if (!mTransger) {
                                let i = 1;
                                res.data.data.annotations.forEach((ele) => {
                                    const temPoints = [];
                                    ele.points.forEach((item) => {
                                        const coord1 = [
                                            'points',
                                            item[0],
                                            item[1],
                                        ];
                                        temPoints.push(coord1);
                                    });
                                    const object = {
                                        annotationId: i++,
                                        classToSet: {
                                            color: ele.color,
                                            name: '人工智能',
                                        },
                                        points: temPoints,
                                        name: '人工智能结果1',
                                        show: true,
                                        type: ele.type,
                                        probablity: _this.getProbablity(
                                            ele.probability
                                        ),
                                    };
                                    _this.aiAnnotationsData.push(object);
                                });
                            }
                        } else if (_this.specimenType === 1578) {
                            // _this.F3info.resultLevel.forEach((item) => {
                            //     let mStr = '';
                            //     if (item.probablity) {
                            //         mStr =
                            //             '(' +
                            //             _this.getProbablity(item.probablity) +
                            //             ')';
                            //     }
                            //     _this.F3AnalysisInfo +=
                            //         '<span style="margin-left:5px;color:#10a1df">' +
                            //         item.key +
                            //         '</span>' +
                            //         ':<span style="margin-left:5px;color:#10a1df">' +
                            //         item.value +
                            //         mStr +
                            //         '</span>';
                            // });
                            console.log(res.data.data.annotations);
                            res.data.data.annotations.forEach((item) => {
                                if (item.partOfGroup === 'ASC-US') {
                                    this.tctPartOfGroup.arrayASCUS.push(item);
                                }
                                if (item.partOfGroup === 'ASC-H') {
                                    this.tctPartOfGroup.arrayASCH.push(item);
                                }
                                if (item.partOfGroup === 'LSIL') {
                                    this.tctPartOfGroup.arrayLSIL.push(item);
                                }
                                if (item.partOfGroup === 'HSIL') {
                                    this.tctPartOfGroup.arrayHSIL.push(item);
                                }
                            });
                            let i = 1;
                            this.tctPartOfGroup.arrayASCUS.forEach((ele) => {
                                const temPoints = [];
                                ele.points.forEach((item) => {
                                    const coord1 = ['points', item[0], item[1]];
                                    temPoints.push(coord1);
                                });
                                const object = {
                                    annotationId: i++,
                                    classToSet: {
                                        // color: ele.color,
                                        color: '#FF0000', //tct 默认全红
                                        name: '人工智能',
                                    },
                                    points: temPoints,
                                    name: '人工智能结果1',
                                    show: true,
                                    type: ele.type,
                                    probablity: _this.getProbablity(
                                        ele.probability
                                    ),
                                };
                                _this.aiAnnotationsData.push(object);
                            });
                        }
                    }
                });
        },
        clickPartOfGroup(name) {
            let _this = this;
            _this.aiAnnotationsData = [];
            let tctArr = [];
            if (name === 'ASC-US') {
                tctArr = _this.tctPartOfGroup.arrayASCUS;
            }
            if (name === 'ASC-H') {
                tctArr = _this.tctPartOfGroup.arrayASCH;
            }
            if (name === 'LSIL') {
                tctArr = _this.tctPartOfGroup.arrayLSIL;
            }
            if (name === 'HSIL') {
                tctArr = _this.tctPartOfGroup.arrayHSIL;
            }

            let i = 1;
            tctArr.forEach((ele) => {
                const temPoints = [];
                ele.points.forEach((item) => {
                    const coord1 = ['points', item[0], item[1]];
                    temPoints.push(coord1);
                });
                const object = {
                    annotationId: i++,
                    classToSet: {
                        // color: ele.color,
                        color: '#FF0000', //tct 默认全红
                        name: '人工智能',
                    },
                    points: temPoints,
                    name: '人工智能结果1',
                    show: true,
                    type: ele.type,
                    probablity: _this.getProbablity(ele.probability),
                };
                _this.aiAnnotationsData.push(object);
            });
        },
        mouseover() {
            this.styleObjectClass = {
                left: '0',
            };
        },
        mouseout() {
            this.styleObjectClass = {
                left: '-100px',
            };
        },
        viewZoom(data) {
            this.viewZoomNumber = data.toFixed(2);
        },
        handleClose() {
            this.mark.warning = '';
            this.mark.remark = '';
        },
        updateAnnotation(annotation) {
            this.mark.warning = annotation.remarkOne;
            this.mark.remark = annotation.remarkTwo;
            this.updateAnnInfo.area = annotation.areaInfo.area;
            this.updateAnnInfo.width = annotation.areaInfo.width;
            this.updateAnnInfo.height = annotation.areaInfo.height;
            this.updateAnnInfo.saveUserName = annotation.saveUserName;
            this.updateAnnInfo.createAt = annotation.createAt;
            this.updateAnnInfo.annotationId = annotation.annotationId;
            this.annDialogVisible = true;
            this.$refs.openseadragon.jumpToArea(
                annotation.extraMessageJson.minX,
                annotation.extraMessageJson.minY,
                annotation.extraMessageJson.minX +
                annotation.extraMessageJson.pixelsWidth,
                annotation.extraMessageJson.minY +
                annotation.extraMessageJson.pixelsHeight
            );
        },
        updateAnnSubmit(annotationId) {
            if (!this.validateForm()) {
                return;
            }
            const submitInfo = {
                remarkOne: this.mark.warning,
                remarkTwo: this.mark.remark,
            };
            try {
                this.$axios({
                    method: 'put',
                    url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations/${annotationId}`,
                    data: submitInfo,
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('更新成功');
                            const index = _.findIndex(this.biopsyList, {
                                id: this.biopsyId,
                            });
                            // if (index < this.biopsyList.length - 1) {
                            if (index < this.biopsyList.length) {
                                this.getAnnotations(
                                    this.biopsyList[index].id,
                                    this.biopsyList[index].newFilename,
                                    this.biopsyList[index].originFilename,
                                    this.biopsyList[index].labelUrl,
                                    index
                                );
                            } else {
                                this.getAnnotations(
                                    this.biopsyList[0].id,
                                    this.biopsyList[0].newFilename,
                                    this.biopsyList[0].originFilename,
                                    this.biopsyList[0].labelUrl,
                                    index
                                );
                            }
                            this.mark.remark = '';
                        }
                    },
                    (err) => {
                        this.$message.info(
                            `更新失败  ${err.response.data.message}`
                        );
                    }
                );
            } catch (e) {
                console.log(`请求失败  ${e}`);
            }
            this.annDialogVisible = false;
        },
        deleteAnnotation(annotationId) {
            this.$confirm('此操作将永久删除该标注, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    try {
                        this.$axios({
                            method: 'delete',
                            url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations/${annotationId}`,
                            data: {},
                        }).then(
                            (res) => {
                                if (res && res.data.code === 200) {
                                    this.$message.info('删除成功');
                                    this.annotationsData = this.annotationsData.filter(item => {
                                        return annotationId != item.annotationId
                                    })
                                    // const index = _.findIndex(this.biopsyList, {
                                    //     id: this.biopsyId,
                                    // });
                                    // if (index < this.biopsyList.length) {
                                    //     this.getAnnotations(
                                    //         this.biopsyList[index].id,
                                    //         this.biopsyList[index].newFilename,
                                    //         this.biopsyList[index]
                                    //             .originFilename,
                                    //         this.biopsyList[index].labelUrl,
                                    //         index
                                    //     );
                                    // } else {
                                    //     this.getAnnotations(
                                    //         this.biopsyList[0].id,
                                    //         this.biopsyList[0].newFilename,
                                    //         this.biopsyList[0].originFilename,
                                    //         this.biopsyList[0].labelUrl,
                                    //         index
                                    //     );
                                    // }
                                } else {
                                    this.$message.info(res.data.message);
                                }
                            },
                            (err) => {
                                this.$message.info(
                                    `删除失败  ${err.response.data.message}`
                                );
                            }
                        );
                    } catch (e) {
                        console.log('请求失败');
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
        },
        findTagName() {
            const x = document.activeElement.tagName;
            const _this = this;
            if (
                x === 'INPUT' ||
                x === 'TEXTAREA' ||
                document.activeElement.id === 'SCinputBox'
            ) {
                document.removeEventListener('keydown', _this.watchEnter);
            } else {
                document.addEventListener('keydown', _this.watchEnter);
            }
        },
        diagnosisLast() {
            if (this.prevPathologyId) {
                sessionStorage.setItem('pathologyId', this.prevPathologyId);
                this.getBiopsy(this.prevPathologyId);
                this.$refs.viewerDiagnosticBasis.init();
            } else {
                this.$message.info('上一个诊断无数据');
            }
        },
        diagnosisNext() {
            if (this.nextPathologyId) {
                sessionStorage.setItem('pathologyId', this.nextPathologyId);
                this.getBiopsy(this.nextPathologyId);
                this.$refs.viewerDiagnosticBasis.init();
            } else {
                this.$message.info('下一个诊断无数据');
            }
        },
        // 监听回车按钮事件
        watchEnter(e) {
            if (
                !this.pathologyId ||
                Object.values(this.visibleDict).indexOf(true) !== -1
            ) {
                //限制热键
                return;
            }
            const keyNum = window.event ? e.keyCode : e.which; // 获取被按下的键值
            const altKey = e.altKey;
            /*Enter-13,F1-112,F2-113,F3-114,1-49,2-50,3-51,4-52,5-53,6-54,Spacebar-32,E-69,Q-81,Tab-9,Esc-27,H-72,O-79,z-90,x-88,c-67,f-70,a-65,d-68,w-87,s-83,F11-122,F12-123,*/
            // 判断如果用户按下了回车键（keycody=13）
            if (keyNum === 83) {
                const val = this.AIdata.find((item) => {
                    return item.inIndex === this.currentSuspicious.inIndex + 1;
                });
                if (!!val) {
                    this.$refs.AIFloatingREF.nextSuspicious(val.inIndex);
                } else {
                    this.$message.warning({ message: '已到底' });
                }
            }
            if (keyNum === 87) {
                const val = this.AIdata.find((item) => {
                    return item.inIndex === this.currentSuspicious.inIndex - 1;
                });
                if (!!val) {
                    this.$refs.AIFloatingREF.previousSuspicious(val.inIndex);
                } else {
                    this.$message.warning({ message: '已到顶' });
                }
            }
            if (keyNum === 13) {
                console.log('dayin');
            }
            if (keyNum === 67) {
                this.AIEvaluationDialogShow();
                e.preventDefault();
            }
            if (keyNum === 70) {
                let _this = this;
                if (_this.experimentDialog) {
                    _this.experimentDialog = false;
                    console.log(_this.experimentDialog);
                } else {
                    _this.experimentDialog = true;
                    console.log(_this.experimentDialog);
                    setTimeout(() => {
                        _this.$refs.DiagnosisResultStatisticsComp.refresh();
                    }, 100);
                }
                e.preventDefault();
            }
            if (keyNum === 112) {
                if (this.visibleDict.patienterList) {
                    this.visibleDict.patienterList = false;
                } else {
                    this.patienterListMethod();
                }
                e.preventDefault();
            }

            if (keyNum === 113) {
                console.log(keyNum);
                if (this.visibleDict.patienterDetail) {
                    // this.visibleDict.patienterDetail = false;
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabOpinion';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (altKey && keyNum === 49) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabBase';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 49) {
                this.$refs.openseadragon.zoomJumpTo(1);
            }
            if (altKey && keyNum === 50) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabPathologyInfo';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 50) {
                this.$refs.openseadragon.zoomJumpTo(2);
            }
            if (altKey && keyNum === 51) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabPathologyList';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 51) {
                this.$refs.openseadragon.zoomJumpTo(4);
            }
            if (altKey && keyNum === 52) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabOpinion';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 52) {
                this.$refs.openseadragon.zoomJumpTo(10);
            }
            if (altKey && keyNum === 53) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabAttachment';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 53) {
                this.$refs.openseadragon.zoomJumpTo(20);
            }
            if (altKey && keyNum === 54) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabDiscussion';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 54) {
                this.$refs.openseadragon.zoomJumpTo(40);
            }
            if (keyNum === 32) {
                this.$refs.openseadragon.ifMove();
            }
            if (keyNum === 114) {
                e.preventDefault();
                this.drawerAi();
            }
            if (keyNum === 69) {
                this.rotateRight();
            }
            if (keyNum === 81) {
                this.rotateLeft();
            }
            if (keyNum === 79) {
                this.goHome();
            }
            if (keyNum === 90) {
                // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
                if (this.urlHaspDiagnosisType) {
                    this.diagnosisLast();
                }
            }
            if (keyNum === 88) {
                // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
                if (this.urlHaspDiagnosisType) {
                    this.diagnosisNext();
                }
            }
            if (keyNum === 122) {
                this.sreenFull();
            }
            if (keyNum === 123) {
                if (this.hotkey) {
                    this.hotkey = false;
                } else {
                    this.hotkeyMethods();
                    e.preventDefault();
                }
            }
            if (keyNum === 72) {
                if (this.showleftPic) {
                    this.showleftPic = false;
                } else {
                    this.showleftPic = true;
                }
            }
            if (keyNum === 27) {
                this.newannotations = [];
                this.mark.warning = '';
                this.mark.remark = '';
                this.changeColor = -1;
                this.__clearAllDrawingTools();
                this.$refs.openseadragon.panToggle(true);
            }
            if (keyNum === 9) {
                const index = _.findIndex(this.biopsyList, {
                    id: this.biopsyId,
                });
                if (index < this.biopsyList.length - 1) {
                    this.getAnnotations(
                        this.biopsyList[index + 1].id,
                        this.biopsyList[index + 1].newFilename,
                        this.biopsyList[index + 1].originFilename,
                        this.biopsyList[index + 1].labelUrl
                    );
                    if (index || index == 0) {
                        this.isActive = index + 1;
                    }
                } else {
                    this.getAnnotations(
                        this.biopsyList[0].id,
                        this.biopsyList[0].newFilename,
                        this.biopsyList[0].originFilename,
                        this.biopsyList[0].labelUrl
                    );
                    this.isActive = 0;
                }
            }
        },
        validateForm() {
            let decide = false;
            this.$refs.markRefForm.validate((valid) => {
                if (valid) {
                    decide = true;
                } else {
                    this.activeName = 'basicInformation';
                }
            });
            return decide;
        },
        // 收藏 - 改变
        async collectChange() {
            this.changeColor = 35
            if (!!this.isCollected) {
                const res = await this.$axios({
                    method: 'DELETE',
                    url: `/PROXY-Remote/collections/${this.isCollected}`,
                });
                if (res && res.data.code === 200) {
                    this.isCollected = null;
                    this.$message.success('取消收藏成功');
                } else {
                    this.$message.warning('取消收藏失败');
                }
            } else {
                this.onComment();
            }
        },
        onComment: function () {
            var _this = this;
            const h = _this.$createElement;
            _this
                .$msgbox({
                    title: '收藏备注',
                    message: h(
                        'div',
                        {
                            attrs: {
                                class: 'el-textarea',
                            },
                        },
                        [
                            h('textarea', {
                                attrs: {
                                    class: 'el-textarea__inner',
                                    autocomplete: 'off',
                                    rows: 4,
                                    id: 'commentContent',
                                },
                                value: _this.commentContent,
                                on: { input: _this.onCommentInputChange },
                            }),
                        ]
                    ),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '提交中...';
                            const res = await this.$axios({
                                method: 'POST',
                                url: `/PROXY-Remote/collections/${this.diagnosisId}?remark=${_this.commentContent}`,
                            });

                            if (res && res.data.code === 200) {
                                this.isCollected = res.data.data.id;
                                this.$message.success('收藏成功');
                            } else {
                                this.$message.warning('收藏失败');
                            }
                            done();
                        } else {
                            done();
                        }
                    },
                })
                .then((action) => { });
        },
        onCommentInputChange() {
            this.commentContent = document.getElementById('commentContent').value;
        },
    },
    // 在beforeDestroy()生命周期内清除定时器：
    beforeDestroy() {
        clearInterval(this.timer);
        this.timerOne = null;
        this.timer = null;
        // 移除监听回车按键
        const _this = this;
        document.removeEventListener('keydown', _this.watchEnter);
        sessionStorage.setItem('sliceAssessStatus', 'false');
    },
    computed: {
        reversedLabelUrl() {
            return this.labelUrl;
        },
        sourceUrl() {
            if (this.$route.query.fileName.indexOf("sdpc") >= 0) {
                return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}`;
            }
            return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
        },
        dziUrl() {
            return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
        },
        switchValueScale() {
            return this.switchValue.scale;
        },
        switchValueZoom() {
            return this.switchValue.zoom;
        },
        switchValueMarkLabel() {
            return this.switchValue.markLabel;
        },
        switchValueAIAnalysis() {
            return this.switchValue.AIAnalysis;
        },
        switchValuePatientId() {
            return this.switchValue.patientId;
        },
        switchValueNavigator() {
            return this.switchValue.navigator;
        },
        switchValueDisc() {
            return this.switchValue.disc;
        },
        switchValueNet() {
            return this.switchValue.net;
        },
    },
    watch: {
        switchValueScale(val) {
            let _this = this;
            if (val) {
                _this.$refs.openseadragon.viewer.scalebar({
                    pixelsPerMeter: _this.$refs.openseadragon.pixelsPerMeter,
                });
            } else {
                _this.$refs.openseadragon.viewer.scalebar({
                    pixelsPerMeter: null,
                });
            }
        },
        switchValueZoom(val) {
            let _this = this;
            _this.$refs.openseadragon.zoomSliderShow = val;
        },
        switchValueDisc(val) {
            let _this = this;
            _this.$refs.openseadragon.discShow = val;
        },
        switchValueMarkLabel(val) {
            //this.value = val;
        },
        switchValueAIAnalysis(val) {
            this.drawerAi();
        },
        //done
        switchValuePatientId(val) {
            //this.value = val;
        },
        switchValueNavigator(val) {
            let _this = this;
            _this.$refs.openseadragon.viewer.showNavigator = val;
        },
        switchValueNet(val) {
            let _this = this;
            if (val) {
                _this.$refs.openseadragon.startDrawingGrid();
            } else {
                _this.$refs.openseadragon.stopDrawingGrid();
            }
        },
    },
    created() {
        
        this.selectedGrid({
            col: 1,
            row: 1,
        });
     },

    mounted() {
        
        this.wbClient = new Client(process.env.WEBSORKET_URL);
        this.collectionDignosis = this.wbClient.subscribe('diagnosis');
        this.collectionDignosis.addObserve(this.$route.query.userId, (data) => {
            console.log('observe', 'diagnosis', this.$route.query.userId, data);
            if (this.pathologyId !== data.diagnosisId) {
                this.getBiopsy(data.diagnosisId);
                sessionStorage.setItem('pathologyId', data.diagnosisId);
                console.log('pathologyId---', data.diagnosisId);
                this.$refs.viewerDiagnosticBasis.init();
            }
        });

        this.collectionAnnotationImages =
            this.wbClient.subscribe('annotations');

        this.dictionariesRequest(this.dictionaryMap); // 字典数据获取
        this.expertOpinion(); //获取专家意见

        // 验证用户登陆,登陆后才能操作

        let _this = this;
        this.loading = true;
        this.$axios({
            method: 'get',
            url: '/PROXY-Remote/current-user',
            headers: {
                defaultHeader: false,
                authorization: this.$route.query.authorization,
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        }).then(
            (res) => {
                if (res && res.data.code === 200) {
                    const user = {
                        id: res.data.data.id,
                        name: res.data.data.name,
                    };
                    this.$store.commit('setUser', user);
                    this.$store.commit('setPropertyGeneral', {
                        key: 'authorization',
                        value: this.$route.query.authorization,
                    });
                    jcanvasFactory($, window);
                    this.loading = false;
                    console.log(!this.pathologyId);
                    if (this.pathologyId == 'null') {
                        this.qualityEvaluationShow = true;
                        this.visibleDict.isShowSliceInfoStatus = true;
                        this.sliceQualityEvaluateRank();
                        this.getSliceInfoInfo(this.$route.query.biopsyId);
                        this.getBiopsyNoPathologyId();
                    } else {
                        this.getBiopsy(this.pathologyId);
                        this.visibleDict.isShowSliceInfoStatus = false;
                    }

                    this.getBiopsyAssess(this.$route.query.biopsyId);
                    setTimeout(() => {
                        this.findTagName(); //由当时的必须点击一下页面才能执行openseadragon的方法改成了自动点击一下页面
                    }, 100);
                } else {
                    this.$message.info('用户验证失败');
                    this.$store.commit('setPropertyGeneral', {
                        key: 'authorization',
                        value: '',
                    });
                    this.$router.push('/login');
                }
            },
            (err) => {
                this.$message.info(
                    `用户验证失败  ${err.response.data.message}`
                );
                this.$store.commit('setPropertyGeneral', {
                    key: 'authorization',
                    value: '',
                });
                this.$router.push('/login');
            }
        );

        // const angle = this.$refs.openseadragon.getRotation();
        // if (angle) {
        //     this.viewerAngle = angle;
        // }
        this.$store.commit('setPropertyGeneral', {
            key: 'authorization',
            value: this.$route.query.authorization,
        });

        const { clientWidth } = document.body;
        const { clientHeight } = document.body;
        // 更新canvas宽高
        $('#drawRectCanvas').attr('width', clientWidth);
        $('#drawRectCanvas').attr('height', clientHeight);
        $('#shadeCanvas').attr('width', clientWidth);
        $('#shadeCanvas').attr('height', clientHeight);
        $('#shadeCanvas').hide();
        $('#drawRectCanvas').hide();
        if (!this.pathologyId) {
            document.removeEventListener('keydown', this.watchEnter);
        }
    },
    destroyed() {
        console.log('destroyed');
        this.wbClient.close();
    },
};
</script>


<style scoped>
.overlay {
    position: absolute !important;
    /* background-image: linear-gradient(to right, #4F4F4F, #E8E8E8)!important; */
    background: rgba(241,241,241,0.8);
    border-radius: 4px 4px 4px 4px;
    top: 45px;
    right: 0;
    width: 40px;
    z-index: 1;
}

.tool-copy {
    background: rgba(241,241,241,0.8);
    border-radius: 4px 4px 4px 4px;
    width: 100%;
    height: 30px;
}

.divCoordinateColor {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px 25px 15px 15px;
    top: 267px;
    right: 45px;
    width: 270px;
    z-index: 4;
}

.divPictureHandle {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 227px;
    right: 45px;
    width: 80px;
    z-index: 4;
}

.divMarkLabelHandle {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 190px;
    right: 45px;
    width: 80px;
    z-index: 4;
}

.divSettingSwitch {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 300px;
    right: 45px;
    width: 110px;
    z-index: 4;
}

.openSeadragon {
  float: left;
  border: solid 1px #38526a;
  position: relative;
  top: 45px;
  height: calc(100vh - 60px);
}

.tool-bar1 {
    width: 30px;
    float: left;
    cursor: pointer;
    color: #49B9AD;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
    display: flex;
    align-items: center;
}

.tool-bar3 {
    float: left;
    cursor: pointer;
    color: #49B9AD;
    padding-left: 5px;
    padding-bottom: 10px;
    padding-top: 5px;
    display: flex;
    align-items: center;
}

.tool-bar2 {
    float: left;
    text-align: center;
    cursor: pointer;
    color: #49B9AD;
    margin: 6px;
    width: 28px;
}

.tool-bar2-copy {
    position: relative;
    float: left;
    text-align: center;
    cursor: pointer;
    color: #49B9AD;
    margin: 5px;
    width: 62px;
    border-radius: 5px;
}

.tool-bar-degree {
    float: left;
    text-align: center;
    cursor: pointer;
    color: #fff;
    padding-right: 3px;
    padding-top: 3px;
}

.cut-line {
    display: inline;
    float: left;
    margin-right: 1.3%;
    background: #fff;
    width: 100%;
    height: 1px;
    display: flex;
    align-items: center;
    text-align: center;
}

.cut-line-copy {
    display: inline;
    float: left;
    background: #fff;
    width: 2px;
    height: 30px;
    display: flex;
    align-items: center;
    text-align: center;
}

.red {
    color: #fff;
    background-color: #49B9AD;
}
::v-deep .el-switch__label{
    color: #49B9AD; 
}
.dialog {
    width: 65%;
    height: 130px;
    margin-bottom: 2%;
    position: absolute;
    bottom: 1px;
    left: 17%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    overflow-x: auto;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;
}

.F3info {
    width: 65%;
    line-height: 30px;
    /* height: 30px; */
    position: absolute;
    bottom: 120px;
    left: 17%;
    z-index: 1;
    font-weight: bold;
    font-size: 20px;
    height: 20px;
}

.quality-evaluation {
    padding-left: 15px;
    width: 80%;
    height: 80px;
    position: absolute;
    bottom: 10px;
    left: 19%;
    z-index: 1;
}

.liImg {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 10px;
    position: relative;
}

.dialog ul li {
    list-style: none;
}

.dialog ul {
    overflow: hidden;
}

.dialog li {
    float: left;
}

.active1 {
    box-shadow: 0px 0px 3px 2px #808080;
    width: 200px;
    background-color: rgba(102, 102, 102, 0.3);
    color: #fafafa;
    z-index: 1;
    position: fixed;
    bottom: 200px;
    border-radius: 5px;
    padding: 10px;
}

.leftPic {
    height: 900px;
    overflow: auto;
    top: 50px;
    border: 0;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    touch-action: none;
    opacity: 0.8;
    z-index: 1;
}

.rightLable {
    position: fixed;
    top: 46px;
    right: 246px;
    opacity: 0.8;
    z-index: 1;
}

.keyword {
    font-size: 12px;
    color: #f78989;
    margin-left: 21px;
    position: absolute;
    top: 5px;
}

.updateInfo {
    box-shadow: 0 0 3px 2px #808080;
    width: 200px;
    background-color: rgba(102, 102, 102, 0.3);
    color: #fafafa;
    z-index: 12;
    margin-left: 19%;
    position: fixed;
    bottom: 200px;
    border-radius: 5px;
}

.annPicUserName {
    position: absolute;
    top: 80px;
    left: 0;
    width: 80px;
    color: #fafafa;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#drawRectCanvas {
    position: absolute;
    z-index: 500;
    left: 0;
    top: 0;
    cursor: crosshair;
}

#shadeCanvas {
    position: absolute;
    z-index: 250;
    left: 0;
    top: 0;
}

#canvasToolbar {
    width: 104px;
    position: absolute;
    z-index: 1000;
    display: none;
    height: 26px;
    background: white;
}

#canvasToolbar .error {
    color: rgb(232, 30, 53);
    font-size: 13px;
}

#canvasToolbar .check {
    font-size: 13px;
    margin-right: 5px;
    color: rgb(73, 203, 95);
}

#canvasToolbar .canvasButton {
    margin-left: 1px;
    margin-top: 3px;
    cursor: pointer;
    width: 50px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    float: left;
}

#canvasToolbar .canvasButton:hover {
    border: 1px solid #ccc;
}

.colorStatus {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

.greenStatus {
    background-color: green;
}

.redStatus {
    background-color: red;
}

.greyStatus {
    background-color: grey;
}

.yesActive {
    margin-bottom: 2%;
    border: solid 3px red;
    cursor: pointer;
    position: relative;
    width: 200px;
    height: 115px;
}

.noActive {
    margin-bottom: 2%;
    border: solid 1px green;
    cursor: pointer;
    position: relative;
    width: 200px;
    height: 115px;
}

.height40 {
    height: 40px;
    line-height: 40px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: auto;
}

::v-deep .el-input-group__append {
    padding: 0 10px;
    width: 10px;
}

::v-deep .divCoordinateColor .el-slider__runway {
    background-image: linear-gradient(to right, #83d2ff, #e6a2ff);
}

.juzhong {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
    margin-left: 25px;
}

.red-color {
    color: red;
}

#ruler-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 诊断详情X号颜色 */
::v-deep .diagnosisDetailClose .el-dialog__headerbtn .el-dialog__close {
    font-weight: bold;
}

::v-deep .diagnosisDetailClose .el-dialog__headerbtn .el-dialog__close::before {
    font-size: 24px;
}

::v-deep .el-dialog {
    margin-top: 100px !important;
}

::v-deep .el-image-viewer__close {
    color: #fff;
}
.grid-btn-box{position: absolute;top:0;right: 100px;width: 25px;display: flex;}
</style>